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لمحة عن الكتاب : 


يتكون الكتاب من ثلاث أجزاء في كل جزء منه يحتوي على مجموعة تمارين عن استخدام عناصر اجاكس في 
بيئة العمل2008 .N81‏ a1اء¡۷يتم‏ شرحها بالصور وبالتفصيل»وذلك لتحقيق الاستفادة الأكبر من الكتاب حيث 
يتعلم الطالب العديد من المهارات المتقدمة في تصميم وبرمجة صفحات الوب مع استخدام عناصر اجاكس» يتعلم 
الطالب أيضا بعض المهارات الأخرى في تنسيق الصفحات باستخدام ععط؟ م[ر)؟ وإنشاء صفوف برمجية 
ئ واستخدام أدوات Standard ASP.net‏ والتعامل مع لغات البرمجة ۳# ولغة ۷8 في استخدامها لحل 
التمارين المتنو عة الموجودة داخل الكتاب في كافة أجزائه » فيمكن للشخص المبتدئ والمتقدم البدء باستخدام هذا 
الكتاب فطريفة تصميمه وإعداده سهلة وبسيطةء»حيث يمكن للمبتدئ إن يحل تمارينها بسهولة ويتعرف على 
الأدوات المستخدمة في حل التمارين بمتعة ويمكن أيضا للمتقدم إن يستفاد من حل التمارين الموجودة حيث 
تحتوي على معلومات مكثفة وعديدة لزيادة خبراته في مجال تصميم وبرمجة مواقع الوب واستخدام تقنية اجاكس 
بمتعة وبساطة . 


مقدمة : البداية مع اجاكس » تنصيب اجاكس وإعداده . 


الدرس الأول : تحديث جزء من صفحة وب نحن نقوم باختيار عنصر محدد لیتم تحدیث بیاناته دون تحدیث کامل 


الدرس الثاني :۽ تحديث بيانات عدة عناصر في الصفحة عبر استخدام eدةö Update Panel‏ في نفس الصفحة . 


الدرس الثالث : 1م" ه٣‏ يظهر في أعلى يمين أو يسار الصفحة ويبقى ثابتاً في الأعلى حتى إنزال شريط الصفحة 
إلى الأسفل يستخدم في الحالات الدعائية أو حالات عدم تسجيل دخول الزوار الموقع أو لحالات أخرى . 


الدرس الرابع : Panel‏ یمکننا الإمساك به وتحریکه الى المكان الذي نشاء بداخل الصفحة . 


الدرس الخامس : زر أمر يوجد بجانب صندوق نص وعند الضغط على الزر يظهر لدينا حامل الألوان يحتوي 
على ۲۱١‏ لون يمكن اختيار احد ا لالوان فيظهر لدينا رمزه في صندوق النص ويظهر اللون بجانب زر الامر . 


مائلاً وتغير نمط الخط والعديد من التنسيقات الأخرى فيمكننا هنا إضافة محرر النصوص إلى صفحتنا للتحكم 
بتنسيق الخط قبل إرسال الرسالة . 


الدرس السابع : عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط فيمكننا هنا إن نجعل الخط عريضا أو مائلا 
فقط والتحكم بإظهار العناصر التي نشاء عبر إنشاء محرر نصوص خاص بنا »› فيمكننا هنا إضافة محرر 
النصوص إلى صفحتنا للتحكم بتنسيق الخط قبل إرسال الرسالة . 


الدرس الثامن : رسالة تأكيد إرسال البيانات أو رسالة تنبيه إرسال أمر معين إلى المخدم . 


الدرس التاسع : عناصر التحقق من إدخال قيم نحن نقوم بتحديدها حيث يقوم التحقق من إدخال أرقام فقط في 
بادخال سوا الحروف الصغيرة والتحقق من إدخال عملية رياضية ولن يسمح سوا أدخال عملية رياضية . 


البداية مع اجاكس: 


: تعريفها‎ 
. Asynchronous JavaScript And XML öةرlبai اختصار‎ AJAX 
: تاریخ اجاکس‎ 


مصطلح اجاكس ظهر أول مرة في مقالة بتاريخ ٠۸‏ فبراير ۲٠٠٠‏ لكاتب أمريكي وقد وصف مجموعة تقنيات و 
أساليب استخدمت من قبل جوجل 6006٤‏ في جوجل أرث تمكن المستخدم من التعامل مع الموقع 
الإلكتروني بطريقة تشبه برامج الحاسوب » حيث يقوم المستخدم بالقيام بأعماله من خلال صفحة واحدة. للتذكيرء 
فإن الأدوات المستعملة في هذه التقنية كانت موجودة قبل ظهور المقالة ۱ .<« ظر !لمر XMLHttp‏ 
داخل مكتبة -اMS×>M‏ (المكتبة التي صممت في البدء لدعم المتصفح انترنت إكسبلورر الإصدار .)٥‏ وظهر 
مکافٺ له باسم ٤ع XML HitpR eu‏ على متصفح موزيلا ومن تم المتصفحات الأخرى. 


مستقبل اجاکس : 


هناك الكثير يعتقدون آنه سيتحول عالم البرمجيات إلى الويب بمعني انه يمكنك استخدام البرامج المختلفة من 
خلال المتصفح وهناك مواقع كثيرة بدأت المشوار مثل تحويل ملفاتك إلى صيغ مختلفة من خلال المتصفح › 
فبعضهم قال إن تطبيقات الويب لم تعد صفحات بعد الآن بل أصبحت تطبيقات سطح مكتب حقيقية 


البدء : 


سنتعلم في كتابنا المصور التقنية الأكثر انتشاراً لمنح صفحات مواقع الوب أداء عالي وجاذبية كبيرة»اعتمد 
هذا الكتاب اعتماداً کبیراً على الصور في شرح محتويات هده التقنية لجعل در استه أكثر سهولة وراحة 
للمتعلم فأتمنى إن يستفاد من هذا الكتاب العدد الأكبر من مبرمجي المواقع الذين يستخدمون بيئة الدوت نيت 
في عملهم . 

يكون لدينا في 2008 10ل ں]؟ 21٠ء۷1‏ العناصر الأساسية في اجاکس وهي ٤ہoزیم‏ )×۴ ×۸ [۸ نقوم 
بإضافة عناصر اجاكس أخرى وهي {أ)ا0ه 1ه۲اروه) ×۸ [۸ هي عبارة عن مجموعة عناصر 

تتيح لنا القيام بتطبيق العديد من حركات اجاكس على صفحة الوب ويتم تحديث تلك العناصر بشكل 

دوري من قبل شر کة Mic|٥s0Ê)‏ 


تنصيب الأدوات الإضافية لتقنية اجاكس ضمن بيئة الدوت نيت 
AJAX Control Toolkit‏ 


عناصر اجاكس الأساسية التي تو جد عند تنصيب 2008 Microsoft Visual Studio‏ 


30 WebSite1 - Microsoft Visual Studio (Adminis 


Filê Edit View Website Bulldl Deb 
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lH HTML 


[= General ١ 
There are no usable controls In this ا‎ 
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٠ ۴‏ ا ا و کچ 
نقوم بإتباع الخطوات التالية لتنصيب عناصر )ا0٥٣‏ 01ء اوم٣‏ × ۸[۸ الإضافية ضمن بيئة دوت نت : 
رن عا کر اه یو ار ا ال و ل ا ارد ا اد د 


http ://www.4shared.com/file/1 10409699/453ec60e/AjaxControlToolkitSource.html 


اتبع الخطوات التالية بعد التنصيب ٠:‏ 
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HET Framework Components COM Comiporteils Î 
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AcressDataSource ystem, Web. LIL. Web Contr System, Weh (2.0.0.0) 
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Favorite Links Name Date taken Tags SIZE Rating 


٣ Projects 


Wl Desktop ۴ 
El Recent Places AyaxkontrolT 


More ++ oolkitîouırce 


Folders 
Û AJAX 
ıJ AJAX BOOK 
" Ajaxkontrol Tool 

۳ AJaxkontrol To 
لى‎ Binaries 
ll SampleWebSt | 
E Teeiing then | 
ıl ToolkitTests 

Jl Lise Callartinn Cn 


File name: AjaeCortral Toolkit .dll 2 


î e 2 e 0‏ سف پیج ` ۴ اا" : : ا E‏ 5 
۷ -نختار من ١‏ لمجلد المبين ١‏ لمكتبة التي تحتوي عناصر اجاكس الجديدة 


5 Open — 
OU. ا‎ «< AyaxlkontrolToolkitSource F 


کک سم 


El UrqaflzeE ¥ EE VTE FE New Folder 


Favarité Links 4 ات‎ 


, Date taken Tags Size 


۳ Projects ٠ 
WI Desktop 13 EE ا‎ ! 
a Recent Places ÃAJaxkLontrolT sampleWe,.,. Testing.Lll..,. ToolkitTests 
oolkit 
More ++ 
Folders 3 | 
J Ax ا‎ 


Û AJAX Book 
| AjaxControlToolki 
ا‎ AJaxkLontrol lT ool 
۳" Binaries 
ا‎ sampleWwebSıte | 
ا‎ Testing.Lllent FÎ 
ıJ ToolkitTests 


i Aiaw Toller Finn TC ant | 


۱ File name: AjaxContral Toolkit .dll 


ا 


OU +#* Ayaxkontrol ToolkitSource F Binaries + | + | | Searh 
ت 3 ر ند‎ 


۹ 


ر 
Favorite Links Name Artists 1‏ 


۳" Projects |& AjaxContralToolkit.dll ك‎ 


(ë| BuildVsi.dll E 
E Uesktop ا‎ n 
| JavaScrıptLommentSstrıpper.dll 


: . ۳ : 1 ا 
ij Recent Places 3#] Microsoft. Web, Testing.dll‏ 
Tools.dll‏ |3 


igre #* 


Folders 
Û AJAX 
ıl AJAX BOOK 
ي‎ AyaxkontrolT ool 
" AyaxkontrolT o 
ıJ Binaries 
Jl SampleWebSit 
ا‎ Testing.Lllent EF 
ıl ToolkitTests 
J Aiaw Fallartinn Fo 


! File name: AjaeCorntrol Toolkit .dll 


ا 


Lhoose Toolbox Items I= 


NET Framework Components | COM Components WPF Components 


| Name Namespace Assembly Name Directory 


AccessUataöîource System.Web. ULWebControls System.Web (AOD) lobal Asse, 
Accordion AjaxContralToolkit AjaxkontrolT oolkit (3... 
AccordionPane AjaxkontrolToolkrt AJaxControlToolkrt (8. 

ActionsPane Microsoft. Office, Tools Microsoft. Office, Tool... Global Asse... 
ActionsPane Microsoft. ffice, Tools Microsoft. Office, Tool, Global As5€,.. 
Activity System. Workflow, Lompone,,. System. Workflow.Co..,. Global Asse... 
E] ADoDC Microsoft. VisualBasic.Lompa.. Microsoft, VisualBasic,.. Llobal Asse... 
ADODLArray Microsoft. VisualBasic. Compa... Microsoft.VisualBasic..,. Global Asse, 
AdomdLommand Microsoft.Analysisseryices.A,.. Microsoft.Analysisser..,. Global Asse, 
Adomdlonnection Microsoft.Analysisservices.Ã.. Microsoft.AnalysisSer,.,. Global Asse... 


Filter: 
Accordion 
E 


Language: Invariant Language (Invariant Lountpyl 


Version: 


عناصر [AX Cont r٥1 ۲٥01)‏ الجدیدة 


| lk Pointer 
EE Accordion 

E AccordionFPane 

CH AlwaysVisibleControlExtender 
ض3‎ AnimationExtender 

E AutoCompleteExtender 
LalendarExtender 


:... 8# 


CollapsiblePanelExtender 
LolorPickerExtender 

LomboBox 

LonfirmButtonExtencler 
UragPanelExtender 
DropDownExtender 
UropShadowExtender 
DynamicPopulateExtender 

Filterecl TextBoxExtendler 
HoverMenuExtender 

Editor 

ListsearchExtender 3q 
MaskedEditExtender 
MaskedEditValidator 
ModalPopupExtender 
MultiHandlesliderExtender 
MutuallyExelusiwek.heckBoxExtendler 
NoaBoat 


NumericllpDownExtendler 


11 


MAN NAEP EAEGA UE FF fT 


تتا 
لسا 


ka @ 


Passwordstrength 


1 ا ا ا ا E‏ _. 


ا ا 


لقد نجحت في إدراج العناصر الجديدة ولكل عنصر من العناصر الجديدة عمل معين يقوم به» وكل عنصر يمتاز 
عن غيره بخصائص مختلفة سنقوم بسردها في تمارين منفصلة تابعونا.. 


الدرس الأول 


وظيفة الدرس الأول لدينا هي تحديث جزء من صفحة وب نحن نقوم باختيار عنصر محدد ليتم تحديث 
بياناته دون تحديث كامل الصفحة عند الضغط على زر الإرسال . 


بداية يجب إن يتم وضع عنصر الاجاكس الأساسي في كافة الصفحات التي سيتم تطبيق تقنية اجاكس 
عليها وهو العنصر التالي : ScriptManager‏ 


a 
5 


HH | El | 
> 1 ا‎ 


| 


ا ا 
4 
2 


kK Poınter ۰ 


e! Script ManagerProxy 
E3 Timer 

2ı UpdatePanel 

jl UpdateProgress 
AJAX ToolKit 

Tl Reporting 

HTML 


1 SFila=" 
2 i 
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ر 
1 5 
ج لک تک پټ ااا 


Default.aspx "Start Page 


KeriptManager =a Scripanager 


1 
الصورة 


Defaultaspx.vb* „ Default.aspx* ‘Start Page 


EeriptManager = Sriptanager i ساد‎ AJAX فی‎ ٠ ل : اة‎ 


abel 4‏ 
عناصر اساسية ت۸8۴ سه Label‏ 


يساوي ا 


قبل المخدم وظيفته إظهار التاريخ والوقت داخل العنصر الحاوي والكود يكون كالتالي : 
الكود في فيجول بيزك : 


'Default.aspx.vb™ | Default.axx™ | StartPage | 


+ jÜ] (Dedarations) 


¬ 


PFartial Class _Default 
Tnherits System.Web. U1. Page 


قنع لکا بن .ا 


ا ا 


ا ك 


Protected Sub Button1 Click (ByVal sender As Object, 2 


End Suk 
a 
3 Protected Sub PFPağe Léoad{[Byval sander As Object, ByvVa 
i Labell.TeXL = Da3t23.NoOw 


۴ 
٣ 
EHA 


Nes Nal al HE 
Label2.Text = Data. Now سإ‎ 4 1 E E شتا لح‎ 
Label3.Text = Data. Now صمل الحلاصير الح‎ 


الكود في سي شارب : 


System; 

System. Data; 

System. Configuration; 
System. Web; 


System. Web. Security; 

System. Web. UI; 
System. Web. UI. WebControls; 

System. Web. UI. WebControls.WebParts;, 
System. Web. UI. HtmlControls; 


public partial class _ Default : System. Web. UI. Page 


{ 
protected void Page Load(object sender, EventArgs e) 


{ 


Label1l. Text = DateTime. Now. ToString(); 
Label2. Text DateTime. Now. ToString (); 
Label3. Text = DateTime. Now. ToString(); 


بعد تنزيل العناصر الأساسية في بيئة الدوت نيت نقوم باستخدام العنصر إعرج۴ مهلم ل وهو من عناصر 
N4‏ xt‌غ‏ ×هز۸ المبين في الصورة 


Start Page | | ° Default. aspx. th, ' Default.aspx™ | 
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اخاکن تکارت دوا من قل المخد وترك ا الأخرى بدون تحديث ال تکون عنصر 
اخاکن ا 


Start Page  Default.aspx,vb ° Default.aspx™ | 
EUah: >» Srp Rlarnager 1 


abel 


العنصر الحاوي للتار يي 1 mee pelate anal‏ 


او اة 


Label 


Button‏ ا 


Fabel 


کی 
وعند التشغيل يظهر لدينا التالي : 


f~ Untitled Page - Windows Internet Explorer 

سي | رک کے سے 
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لح تحذنت بيات 


1 ا المستخد ا 


1232007 238:50 PM 


EN‏ السابقة تم وصح زر الإرسال Button‏ أبضا داخل عنصر اجاکں e‏ »سنقوم في مثالنا 
التالي باخراج عنصر الإرسال Button‏ من داخل عنصر اجاکس ويتخدذند العنصر المراد تحديثه 
عن طريق خصاص عنصر 1ع,ه۴ ع2 لمل المستخدم كمايلي : 
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وعند التشغيل سیتم عمل تحديث للعنصر 12ط[ الموجود داخل عنصر اجاکس المستخدم 
مع وجود عنصر الإرسال 8)٥٥‏ خارج عنصر اجاكس ليكون لدينا نتيجة الدرس كمايلي : 
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نهاية الدرس الأول في اجاكس 


في هذا الدرس سنقوم باستخدام عدة عناصر من [عمھ۾* Update‏ لإرسال محتو ياتها إلى المخدم 
ْ سنستخدم | لمثال في الدرس الأول ونتابع حل تمريننا هذا ۰ 
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arma‏ اب E EE‏ جس ایی 
عند ترك الخاصية M10٥‏ ٥21ل‏ ملاعلى sرجس|ا۸‏ فأنه سيتم تحديث العناصر الموجودة داخل 
Update Pane11‏ و العناصر الموجودة داخل 12ع" ۴a‏ 2لم € عن الضغط على زر ۸ But )0٥‏ › 
ولكن عند تغير الخاصية إلى إ]حمه1)زلمه٥‏ فانه سيتم تحديث محتويات ۴2,٥11‏ عtه‏ لمل فقط ولن 
يتم تحديث محتويات ۲,٥12‏ عه لمل إلا إذا قمت بالتصريح عن ذلك بشكل صریيح . 
- توضح الصورة استخدام Always‏ : 
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- توضح الصورة استخدlم Conditional‏ : 
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| وی ودن ۰ : 1 l1 Em‏ 
کی کی #۸ سے وی دی کار .ی لیر ی کی .۔ 
في الصورة السابقة تم تحديث 11ع ,ه۴ ماهل مل فقط ويمكننا بطريقة أخرى إن نجعل 12عم۴a Update‏ 
تتحدت بياناتها بعمل الأتي : 
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فیمکننا استخدام Update Panel‏ عندما نريد تحديث بيانات جزء من صفحة وب وبالتالي تقليل األضغط E‏ 
المخدم لدينا 
SS‏ 


نهاية الدرس الثاني في اجاكس 


الدرس الثالث 


1 يظهر في وسط الصفحة ويلغي تفعيل باقي الصفحة مع إعطائها اللون الرمادي وعدم السماح بالضغط 


2 إرجاء الصفحة لکن یسمح بالضغط علی عنصر داخل[عہ ھ۴ لیتم تفعيل الصفحة من جدبد 


الصورة العامة لتصميم صفح Defaulf‏ ° 
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Î AaysmeîbleCon.... 

dF AnimaüenExtendêr 

Î AutocompleteExt,.. 


PLease click کا‎ 


ندرج صفحة رئيسية ضمن محيط العمل : 
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نقوم بأدراج صفحة ستايل شيت ونكتب بداخلها التالي : 
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.modalBackground 

} 
background-color:Gray; 
(filter:alpha(opacity=70; 
opacity:0.7; 

{ 


borcdar =ztwlazsaTid: 


.modalPopup 

1 
background-color:#ff{ffdd; 
border-wıdth:3 px; 
border-style:sol1d; 
border-color:Gray; 
padding:3px; 
width:250px; 

{ 


نبين سويا صورة الكود الخلفي للصفحة )إuںج؟م0‏ : 


ITC TETE keel پا 2 ا اجا‎ HS 1.1, EH" "E 
1 ETEl amlme™" fr ۳ E 1 


2 Ee FEAT "ae ryEry 

| E Cm ER e e SE | 
FA Br 

E] Ea 


E] 3 TET دو ای)۰ راا ایا د کے دہ لے ا‎ 
Ep IESEipTHeNBgE IC""ErripTrHrgerl rona pmaprTy, 
"mrp 2r pEHana GSS 
i 
1 


taa PARE L3 


xuna E r" pyTTgr™ 


ريط االعتصر مج الرابط المد تي س 
رظ الشنقر مع السانل المدتور س 
نظ نایل عضر خاش سے 
تقعيل الطل نعد 


بط صر اجس مع الزر موادي ربظ عنضر اجائس هع رر األفاء Ea‏ 
EY‏ سے ۴ د ی بے اح لے کے ۸۹ ا ا ی سای 
الكود الكامل للتمرين ٠‏ 


@ Page Language="C#" AutoEventWireup="true" 


CodeFi1 le="Default.aspx.cs" Inherits=" Default" 


<!DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.1//EN" 


"http: //www.w3.Oorg/TR/xhtml11/DTD/xhtml1l1.dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtml "> 


<head runat='"server'"'> 
<title>Untit led Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" 
/<> 
</head> 
<body> 
<form id="forml" runat='" server'"'> 
<asp :ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<br /> 
<asPp :LinkButton ID="LinkButtonl" runat="server'">Please click 
</asp: LinkButton><br /> 
<br /> 
<div> 
<asp:Panel ID="Panell" runat="server" CssClass='"modal1lPopup" 
Style="display: none" Width="233px'" > 
<م/> هل انت متأكد<مط>‎ 
<div align="center"> 
<asp : Button ID="OkButton" runat="server" Text="OK" 
PostBackUrl='"~/Home.aspx'" /> 
<asp : Button ID="CancelButton" runat="server" Text="Cancel" 
PostBackUrl='"~/Default.aspx" /> 
</div> 
</asp :Panel> 
<br /> 
<ajaxToolkit : Moda l[IPopupExtender ID="ModalPopupExtender1l " 
runat="server" 
TargetControllID="LinkButtonl'" 
PopupControlID="Panel1" 
BackgroundCssClass='"modalBackground" 
DropShadow="t rue" 
OkControlID="OkButton" 
CancelControl1ID="CancelButton" /> 
</div> 
</form> 
</body> 


يظهر لدينا الشكل الأخير عند الانتهاء : 
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نهاية الدرس الثالث في اجاكس 


الدرس الثالث 


1ه يظهر في أعلى يمين أو يسار الصفحة ويبقى ثابتاً في الأعلى حتى إنزال شريط الصفحة إلى 


الأسفل يستخدم في الحالات الدعائية أو حالات عدم تسجيل دخول زوار الموقع أو لحالات أخرى 


الصفحة العامة للتمرين يجب إن نقوم بملء الصفحة بالمعلومات ليظهر لدينا شريط التمرير على اليمين 
للحصول على أفضل النتائج في حل الدرس : 


„' Defaultaspx" | readme. tet: Î Start Page 


There is one chapter on he acmal media production process and that chapter is very good It’s just now worth 
| what Î paid for the entire book. 


posted (@ 1:59 PM | Feedback (O) 


Tuesday, August 15, 2006 > 


How-Do-I Video - Add Atlas to an Existing Website 


Check out e recent addons tê my Atlas How-Do-IF Video Series. 


الخطوة التالية سنقوم بأدراج 1٥م‏ ه۴ إلى جسم الصفحة ويكون كمايلي: 
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شکل اد۴ بعد الاعتاقة فهو ممتار نکل جمیل سه 


ا ي ت اي و او 4 4 اف اي و سي جس اص .ل 
تک اخ افر جاگ کال : 
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JÜ} DragPanaiEtender Wednesday, August 16, 2006 & 
BOOK - Web Radio - Radio Production for Internet Stream 
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و عنا الانتهاء يظهر لدينا الثلى : 
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وكما نعلم فانه بإمكاننا وضع ما نريد من صور و فلاشات أو أي شيء أخر نرغب به لتصميم صفحات موقعنا 


نهاية الدرس الثالث في اجاکس 


الدرس الرابع 


1 يمكننا الإمساك به وتحريكه إلى المكان الذي نشاء بداخل الصفحة 


صورة صفحة الوب يكون كالتالي : 
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عنصر اجاكس المستخدم : 


= AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

E AlwaysVtsibleLontrolExtender 
3# AnimationExtender 


AutoLompleteExtender 
Lalendartxtender 
LascadıingqDropÛown 
LollapsıblePanelExtender 
LolorPIckerExtender 
LomboBox 


LonfirmnButtonExtender 


E E 


UDropDownExtender 
UropShadowExtender 
| DynamicP GE der 
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الكود البرمجي بصفحة الوب: 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http: //www.w3. Org/TR/xhtml11/DTD/xhtml1l1. dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtm1l "> 
<head id=" Head1" runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1l " 
runat="server" TargetControllID="PanelContainer" 
DragHandlelID="PanelHeader'"> 
</ajaxToolkit :DragPanelExtender> 
<asp:Panel ID="PanelContainer" runat="server" 
CssClass="dragContainer" > 
<asp:Panel ID="PanelHeader" runat="server" 
CssClass="dragHeader'" > 
<br />Header</asp:Panel> 
<asp:Panel ID="PanelBody" runat="server" 
CssClass="dragBody'" > 
<br /> 
One<br /><br /> 
Two<br /><br /> 
Three<br /><br /> 
Four 
</asp:Panel> 
</asp: Panel> 
</div> 
</form> 


<script type="text/ javascript "> 
function setBodyHeightToContentHeight () { 
document . body.style. height = 
Math.max (document . documentElement.scrol lHeight, 
document . body. scrol lHeight) +" px"; 
j 
setBodyHeight ToContentHeight (); 
window.attachEvent ('onresize', setBodyHeightToContentHeight); 
</script> 
</body> 


</html> 


ملف الستایل شیٽ Style Sheet‏ 
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کود ملف الستایل شيت : 


.dragContai1ner 

1 

background-color: #FFCOFF; 
height: 282px; 

width: 357px; 
border-bottom-color: black; 


{ 


.dragHeader 
1 
background-color: #S8O08OFF; 
height: 48px; 
width: 358px; 
{ 


.dragBody 
1 
background-color: #FFCOFF; 
height: 213px; 
width: 357px; 
{ 


الور الا ات الكريى.: 


Solution Explorer - Solution 'HDI-ACT-... ¥ 
2 alê 2 | & * 

r" solution ‘HDI-ALT-DragqPanel-LS' (1 proj 
El: ق‎ Ci. \HDI-ACT-DragPanel-CS1 ل‎ 


عنك التنفيذ يظم لدينا : 
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نهاية الدرس الرابع في اجاكس 


الدرس الخامس 


زر أمر يوجد بجانب صندوق نص وعند الضغط على الزر يظهر لدينا حامل الألوان يحتوي على ۲٠١‏ لون 
يمكن اختيار احد | لالوان فيظهر لدينا رمزه في صندوق النص ويظهر اللون بجانب زر الأمر 
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/ کے ای لے سے ھی کسی ی سے مس کک کے ی م کی 
صورة عنصر اجاکس المستخدم : 


| 7 AJAX ToolKit 
lk Pointer 
3E Accordion 
E AccordionPane 
E AlwaysVtsibleLontrolExtender 
3# AnimationExtender 
اسا‎ AutoLompleteExtender 
E LalendarExtender 
7% CascadingDropDown 


ن 


ê 
C۳ 
4 
# 


- LollapsiblePanelExtender 


UragqPaneltxtender‏ جا 
ly DropDownExtender‏ 
LF DropShadowExtender‏ 


الكل الغا حط العمل : 


Solution Explorer - Solution 'ACT-Color... w Hem, 


2E 3 
lag) Solution 'ACT-ColorPicker-CS' (1 projec 
û. Ê CA.\ACT-ColorPicker-C5\ 

۰ E Fr App_Data 
i ûg Bin 
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E web.config aaa 
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نستخدم في درسنا هذا عنصر جميل جدا يسمح لنا باختيار لون من حامل الألوان ويقوم بإظهاره بداخل بانل 
خارجي في الصورة شرح لاهم إحداث العمل : 
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ست تھی سے سج ی اا اک ی اا اا ئی ی سے کی ی می کی ی ا ات تی کے 


د ا ت اد ی ہا س 


@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl1l" 3< 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 


"http: //www.w3. org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head id=" Head1" runat="server"> 
<title>ACT Color Picker COntrol</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl " 
runat='"server"></asp: ScriptManager> 


<div> 

<asp: TextBox runat="server" ID="Color2" 
AutoCompleteType="None" MaxLength="6" style="float : left" /> 

<asp: ImageButton runat="Server" ID=" Imagel" 
style="float: left;margin:O0 3px" 


ImageUrl="~/images/cp_ button. png" 


AlternateText="Click to show color picker" /> 

<asp:Panel ID="Samplel" 
style="width: 18px; height : 18px; border: 1px solid #000;margin : 0 
3px; float :left" runat="server" /> 

<cc1:ColorPickerExtender ID="buttonCPE" runat="server" 
TargetControlID="Color2" 


PopupButtonlD=" Imagel " 
SampleControlID=" Samp lel" 


SelectedColor="33ffcc" /> 
<br /><br style="clear:both" /> 
<div style="font-size: 90%"><em> (Click the image button 
show the color picker) </em></div> 
</div> 
</form> 
</body> 
</html> 


نهاية الدرس الخامس في اجاكس 
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الدرس السادس 


عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط وإضافة رموز والى تلوين الخط وجعله مائلاً وتغير نمط 
الخط والعديد من التنسيقات الأخرى فيمكننا هنا إضافة محرر النصوص إلى صفحتنا للتحكم بتنسيق الخط قبل 


إرسال الرسالة 
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Hn Yiuorlg 


ا ا ا ا 


اما اتاد انریا س لا با 


صورة عن عنصر اجاكس المستخدم : 


2 AJAX ToolKit 
lk Pointer 

3E Accordion 
3E AccordionPane 
HE AlwaysVisıblekLontrolExtender 
AnimationExtender 
AutoLormpleteExtender 
a LalendarExtender 
ا‎ LascadingqUropDown 
= LallapsıblePanelExtender 
LolorPıckerExtender 
jı LomboBox 
LonfirmButtonExtender 
DragqPanelExtender 
E ÛropDownExtender 

LF DropShadowExtender 

a] UynamicPopulateExtender 
ab | FIlteredTextBoxExtender 
R HoverMenuExtender 
sl ListsearchExtender 


الصورة تشرح الكود البرمجي للصفحة : 


+ DHE mp] tt Fage' Orfa ap _ 1 a. 


` | Een Qbjerks & Eieriis 3 Tt Even] 7 


ERÊ Fugu Laagaugu™= "ÇE" atolrqatMizmapg™" tua" CeMFila™ "Dudu .aap#.cr" Imiazitr™" Catwalk" ¥ 


1 
RA Fg tur Aaa wekl "AEC rirSITaDLES E" Mamma apacgm "Rd upZanETaAITaLL EET HTL iE ar" 1 
` TafPeeFEx™"ita" 


21 CTYPE hnrml PIELIG "FFD OTE ABTHE 1,9 Txroan=siTtiaons 1F FEH™ 


1 hil mlna "itil: 


اا ا ج ی ا اا ا ا 


ا ا 
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hry‏ 
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ا س 


ل 
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@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" 3< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit . HTMLEditor'" 
TagPrefix="cc1" Ez 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 


"http: //www.w3.Oorg/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl'" runat="server"> 
</asp :ScriptManager> 
<div> 
<center><ccl1:Editor ID="Editorl" runat="server" Width=" 600px" 
/></center><br /><br /> 
<asp: Button ID="Buttonl" runat="server" Text='" Button'"" 
onclick=" Button1 Click" /><br /><br /> 
<aspPp: Label ID="Labell1'" runat="server" 
Text="Label"></asp : Labe1l> 
</div> 
</form> 
</body> 
</html> 


نضغط مرتين على زر الأمر ۸1هخخسا8 ونكتب الكود التلي باللغة سي شارب : 


using System; 
using System. Collections. Generic; 
using System. Lind; 


using System. Web; 
using System. Web. Ul; 


using System. Web. UI.WebControls; 


public partial class _ Default : System. Web. UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 


j 
protected void Button1 Click (object sender, EventArgs e) 


{ 
Labell. Text = Editor1l.Content; 


} 


نهاية الدرس السادس في اجاكس 


الدرس السابع 


عند إرسال أيميل أو رسالة نحتاج إلى تعديل الخط فيمكننا هنا إن نجعل الخط عريضا أو مائلا فقط والتحكم 


باظهار العناصر التي نشاء عبر إنشاء محرر نصوص خاص بنا › فيمكننا هنا إضافة محرر النصوص إلى 
صفحتنا للتحكم بتنسيق الخط قبل إرسال الرسالة 


EY Lale by LETA Û GT kG 


الصورة العامة للتمرين بعد الانتهاء : 


TIN FT E 


gE = moe LnTeît Kage 
5 3 


E ag: J 


i gi jP hetpelocaihadAALMYACT-CustomwEdcrCSD.. 


٠ اللصور ة العامة لمحيط العمل‎ 
Solution Explorer - Solution TAC T-Custo..w HM x 


® | Elê E A| & ® 


laj Solution 'ACT-Custom-Editor-CS' (1 project] 
E ق‎ CA ACT-Custom-Editor-CS 

E] ig App_Lode 

i BF 


في هذا التمرين نحن لسنا بحاجة إلى عناصر اجاكس بل هنا سوف نقوم ببناء عنصر اجاكس جديد اعتماداً 
على عنصر اجاكس موجود مسبقا أي سنقوم بإجراء تعديل على عنصر اجاكس القديم لكي يلبي حاجتنا 


- طريقة إنشاء صف جديد هي كالتالي : 


i ki ra i = lar EE e E SA Tah E ET 


2 Taza Lazgi | 
1 Fagin: Hj apl HE 


| | aul hibra kitrrglar 


E | Aa) A | 


a) HE AT. DSTrEErET O 
_ً 


e[TeTIEE | ita Haake Fiji E ait Uni rm 0 
F Hial n— ا‎ am mn J rk rk بے : و‎ 
E lL EE BI eby bpp tr xe Ba tlefgamik “ 
erb) | PH Re J Mk haus i lazi 
threat | | Fmkara i SL Dela ii i Cui 
lly | | mit Ham ER E] Crete Niger, 
ra al Hebi Hb Frm HSE Fk lÎ Freer: ا‎ 
aap opr Ri FF Haê ker oral IF HB a ekg a1 Fi 
ait | | Fiat BG Siri LJ [ize Tih 1 
1: ll] Thr Pg 
PF arp 
| hirl Tera: 


i TY din re:lrtir: 
| ire: فة‎ ٠ اسم الصف الجديد‎ 


:| اۆنقچدفا | 


عند الانتهاء من إنشاء الصف نكتب بداخله التالي : 


3 jE Bap A CofesS in ple | ت‎ 
3 AF ic onËq a tirih î mir irinı e. FF FIT pT mas 
1 Ei asl Sy FenF 


e CO Ly Bi 1 ih Ta Fr o 
| airy Ya TEM EINE 
| HSE Aya Tema He 


REE — ic شآ‎ qh 


BUELIS Sma Sinn Editeoe 5 EAltter 


1 


prsteased cwerride Toi F11IFopTaalLbar i] 
i 


prmemstead arerrids Tas Fill1lBzttiarTenlbarr |] 


جس الي ۸ اي اي نے و یں ال لے ا و کدی اکر ںین یتین ی لک 


: الكود في سي شارب‎ 
using System; 
using System. Collections. Generic; 
using System. Lind; 
using System. Web; 
using AjaxControlToolkit. HTMLEQitor; 


namespace JoesAjaxControls 


{ 
public class SimpleEditor : Editor 


{ 


protected override void FillTopToolbar () 
{ 


TopToolbar. Buttons. Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. BOld()); 
TopToolbar. Buttons. Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. Italic()); 
j 


protected override void FillBottomToolbar () 


{ 


BottomToolbar. Buttons . Add (new 
AjaxControlToolkit. HTMLEQitor. ToolbarButton. DesignMode ()); 
BottomToolbar. Buttons . Add (new 


AjaxControlToolkit. HTMLEQditor. ToolbarButton. PreviewMode () ); 
1 
1 


ا 


ا 
CILCOCTEITFE heml FELL "FHC; S OTD. HHI 1.0 Franailans‏ 
1 


پا ےا چا ےا سیت 


e O‏ ای فد ار ی کی ٣‏ فن ۳8 ا ای ۴ ا ey‏ و ت ي r‏ ا 


: الكود البرمجي لصفحة الوب‎ 
@ Page Language="C#" AutoEventWireup='"true'" 
CodeFi1le="Default.aspx.cs" Inherits=" Default" E 
<%@ Register Namespace="JoesAjaxControls" TagPrefix="Awaz" Ez 


<!DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.Oorg/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="forml1'" runat="server"> 
<asp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<div> 
<Awaz :SimpleEditor id="Editorl" runat="server" width=" 640px" 
/<> 
<asp : Button ID="Buttonl'" runat="server" Text=" Button" 
onclick="Button1 Click" /><br /><br /> 
<asp :Label ID="Labell" runat="server" 
Text=" Label'"></asp : Label> 
</div> 
</form> 
</body> 
</html> 


الكود الخلفي لزر الأمر وم))ں8 : فعند الضغط على الزر يظهر نتيجة إرسال البيانات داخل 1عطج] . 


using System; 

using System. Collections. Generic; 
using System. Lind; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class _ Default : System.Web.UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 


j 
protected void Button1l Click (object sender, EventArgs e) 


{ 
Labell. Text = Editor1l.Content; 


} 


ملاحظة : لم یتم استخدام ای عذ ن¿ عناصر اجاکس فی هذا التمرین بل قمنا ببناء عنصر اجاکس جدید 
يتم م اي عنصر من عناصر اج في ين د ببناء عنصر اجاکس جدڊ 
واستخدامه وذلك باستخدام الصف البرمجي AjaxControlToolkit . H1MLEditor‏ 


نهاية التمرين الدرس السابع في اجاكس 


الدرس الثامن 


رسالة تأكيد إرسال البيانات أو رسالة تنبيه إرسال أمر معين إلى المخدم 


الصورة العامة للتمرين : 


TÊ 1 0 1 î 
بطل‎ AIOE S&S o oor, 
e LL BM O * Kı”? Sigs Ta” + > 


ا 


ل 
ل 
Ê‏ 
ا 
۴ 
¢ 


ني 


صورة عن عنصر اجاکس ١‏ لمستخدم : 


َ 
4 
ا 
¢ 


= AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

E AlwaysVisıbleLontrolExtender 
3ë AnimationExtender 
AutoLompleteExtender 
gı LalendarExtender 
LascadıngqÛropÛown 
LollapsiblePanel Extender 
8 LolorPickerExtender, 


E3 ComboBox E 


lı» UragPanelExtender 


ry‏ ا 


الصورة تشرح لنا الكود البرمجي : 


Cilent Olfercts & Events F (Plo Events) 


& EFaqte Language ="TVE" AUtESETVERTWireupg™"False" Code EFLlcS=TLDeFEaATILTE 


1 

2 

3: <38 Register AsseRbly“"AiaxControlToalkit" Hamespace“"AjaxControll 
a: 


5) +41 DOCTIPE heml PUBLIZ "FULT DTD XATHL 1:0 Transicionel/7EM" "Ff 
Ti) HEMA EIFRSSTRC EEE f J HW HS CEA LSI EBT" 
E: head ruRAtE"ge TET 
#EIEIESEFELTISS 
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thedys 
RESEmM LATIF" EGRET = "saye" 
ZAEFE SCEIFP tanger LIO=F"SeriptHaniagerl" rarat=" ae 
ZFaSD ; ScEipEHManagersy 
a E 


1 


E 


2 
a3; Air 
E 4# FOES 
AHF $F BoA 
N ame 


بعد تنزيل عنصر اجاكس المحدد نقوم بالتعديل على خصائصه لكي يلاءم تمريننا : 


Ar 
Cllent Objects & Events ¥” (hla Events) a ت ااافا لغ د‎ 1 
) 1 Ê Perge Language™"VE" 2 LEE TERE کات ا ا ا‎ 
3 %8 Reqister Aie bBIlY ی‎ 
5 x!DOCTYPE hem1 FUBLIG 
a 
| TE êm m1n a=rpE Ep 


A xend rümat="aerrerî# 
1 4tItlESEFEITIes 
z7 Read? 
zry 
EST E" "ToT" 
AAP: SEE Ip THatage] 
+ ap: Ser IpEManagê 
Airy 
Zap ?BHETOR TE 


* 


Confira Butter Extender] 


Behavior 
Confirm nF orrrSibirmil 


Falsê 


DitplayMedalPo pupID 
Enabled 
rC lent ancel 


folio ire 


Cl mm! 1 Gê EE IE ۳ 


: E ranat 
20: # j EDEM Sen path 
AL: E BOY 

32 lt html > 


عندما ننتهي من تعديل خصائص عنصر اجاكس المستخدم ننهي عملنا بالضغط مرتين على زر الأمر لتفعيل 
حدث الضغط على الزر والذهاب إلى المخدم 


: ت ta Ê FAQE‏ . ت DefaulLaspx.vb* Deft ft:‏ ` ن 
y# Buttond + # Chick ۴‏ 
Fartiail Class _Defauir a‏ 2# 


IRMHETELES SYStEM.WEb. UI. Pagê 
FEortscETted Sa BEEN] CLILSK (BTal sender AS Object, Byval € 1 


Erd Sub ۹ 


وفي النهاية عند تشغيل التمرين سوف يظهر لدينا رسالة تأكيد إرسال البيانات إلى المخدم . 


نهاية الدرس الثامن في اجاكس 


الدرس التاسع 


عناصر التحفقق من إدخال قيم نحن نقوم بتحديدها حيث يقوم التحقق من إدخال أرقام فقط في الصندوق الأول 


ولن يقبل إدخال أي شيء سوا الأرقام والتحقق أيضا من إدخال حروف صغيرة فقط ولن يسمح بإدخال سوا 
الحروف الصغيرة والتحقق من إدخال عملية رياضية ولن يسمح سوا إدخال عملية رياضية 


الصورة العامة للتمرين : 


Untrtled Fage - Windows Internet Explore! 


CE * F| http: fRecalhast: ISAjax Contr a ToclkitWebsite 1D efat. aspx SISE 


: Fle Edt View Fawartes Tools Hep nk J Pagaales | CT Sarees B] PariMaps ” : gi snar E 


nly dizils are alowed here: 
Waly lower-case letters are alowed here: 
Only math syubols (F,=,* =, and nmuib 


ye 


صورة عنصر اجاكس المستخدم : 


2 AJAX ToolKit 

lk Pointer 

3E Accordion 

3E AccordionPane 

TH AlwaysVisibleControlExtender 
3 AnimationExtender 

ً Auto_ompleteExtender 

tg LalendarExtender 

i LascadıingDropDown 


= LollapsiblePanelExtender 
1 LolorPickerExtender 

2 LomboEBox 

1 LonfirmButtonExtender 
چيا‎ DragqPanelExtender 

ly DropDownExtender 5 
lF ÛDropShadowExten Jer 

| DynamicPopulateExtender 


Ra HoverM emuyExtender 
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Tham Object Bı Everts x. n Fart] 
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fı «hend L3" Beal rua server" 


ا ا ا ی ا ا ی ا ا 


pi EARTHED EC™"BaripcHansger1™. ¥ 


TATARESEREEIERI E ereOTEAEBAREREENAE E "FIT aemEten f rIn__m— 
ا س 2 ا یا ا‎ 
EFT EET f FilseredTeREBoAEaGENQEEF 


taba kacdgrwm A: ۳ = ٣ 
تجن ادتالي أرالاام ورقنلية لاف‎ 


ق .ج ي ي حي ي اهر ي اسي .ااي 9 e‏ جسيم 
الكود الكامل لصفحة الوب : 


@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.1//EN" 


"http: //www.w3.org/IR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head id=" Head1" runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<ajaxToolkit:FilteredText BOxExtender 
ID="FilteredTextBoOoxExtender1l" 
runat="server" TargetControlID='"Text BOx]1 " 
FilterType=" Numbers "> 
</ajaxToolkit :FilteredTextBoxExtender> 
<ajaxToolkit:FilteredText BOoxExtender 
ID="FilteredTextBoOoxExtender2" 


runat="server" TargetControllID='"Text BOx2 " 
FilterType="LowercaseLetters"> 
</ajaxToolkit :FilteredTextBoxExtender> 
<ajaxToolkit :FilteredText BOoxExtender 
ID="FilteredTextBoxExtender3" 


runat="server" TargetControlID='"Text BOxX3" 
FilterType="Custom, Numbers" ValidChars='"+—-=/* () . "> 
</ajaxToolkit :FilteredTextBoxExtender> 
<table border=" 0"> 
<tr> 
<td>Only digits are allowed here:</td> 
<td> 
<asp: TextBox ID="TextBOoxl'" runat="server"> 
</asp : TextBox> 
</td> 
</tr> 
<tr> 
<td> 
Only lower-case letters are allowed 


here: </td> 


<td> 
<asp : TextBox ID='"TextBOx2" runat='"server''> 
</asp :TextBox></td> 


</tr> 
<tr> 
<td> 
Only math symbols (+,-,*,/,=,.) and 
numbers :</td> 
<td> 
<asp : TextBox ID="TextBOx3'" 
runat='"server"></asp: Text Box></td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 


ملاحظة : يمكن من خلال عنصر اجاكس المستخدم في هذا التمرين القيام بعمليات تحقق أخرى يمكنك تجرييها. 


نهاية الدرس التاسع في اجاكس 


المصادر 


٠‏ الجزء الخاص باستخدام التقنية في المكتبات لتقرير لجا سون أ. كلارك 
® gړga ASP.NET‏ 


AJAX. 


Asynchronous JavaScript And XML = AJAX 


بالتمارين 


P art 2 


۶ 
تألیفنے وعدا 
آواز شخي 
Ramanooo@ hotmail. com‏ 


00963955264766 


تاریخ اجاکس: 
E SN TT‏ 


مستقبل اجاکس: 

هناك الكثير يعتقدون أنه سيتحول عالم البرمجيات إلى الويب بمعني انه يمكنك استخدام البرامج المختلفة من خلال 
المتصفح وهناك مواقع كثيرة بدأت المشوار مثل تحويل ملفاتك إلى صيغ مختلفة من خلال المتصفح › > فبعضهم قال 
إن تطبيقات الويب لم تعد صفحات بعد الآن بل أصبحت تطبيقات سطح مكتب حفيقية. 


تنويه مهم قبل البدء : يجب تحميل الجزء الأول من الكتاب وتعلم كيفية ربط عناصر اجاکس ببيئة ۲ .×٤‏ 
8 من خلال الدرس الأول في الجزء الأول من الكتاب يمكن تحميله من الرابط التالي : 


http://www.4shared.com/f1le/1 10593220/71ee5e0d/AJAXnet.html 


المحتويات 


تبديل ألوان عناصر الصفحة بدون استدعاء كامل الصفحة في هذا التمرين تم تطبيق 
تعديل ألوان عنصر وحيد ويمكن تطبيق التغير على عناصر متعددة في نفس الصفحة . 


التحقق من إدخال فيمة صحيحة في الحقول وعدم تركها فراغ والتحقق يتم على 
مستوى الصفحة . 


التكبير والتصغير . 


قائمة مشابهة لقائمة تظهر فى موقع ياهوو الشهير ويمكن زيادة عدد الروابط عليها 
وان يحتوي كل رابط على مجموعة من البيانات ويتم استدعاء تلك الروابط بشكل 


مباشر . 


يتم وضع نمط شكل معين لإجبار المستخدم على إدخال معلومات وفق شكل محدد 
والتحقق من إدخال كل البيانات بشكل صحيح . 


صندوق نص يظهر بداخله عبارة تساعد المستخدم على معرفة ماذا يجب الإدخال 
داخل الصندوق باستخدام ستايل شيت ويمكن تطبيق عناصر التحقق لإجبار المستخدم 
علی إادخال فيم معينه . 


زر أمر عند الضغط عليه يظهر لدينا صندوق على شكل فلاش يحتوي على نصوص أو 
إي عنصر من عناصر ا۸ ويتم إلغاء الضغط على الزر إلى إن يتم إغلاق الصندوق 


المفتوح . 


تم تغفير مفهوم الاختيار المتعدد لعنصر )۸€٤)80×‏ حيت سيقوم المستخدم باختيار عنصر وحيد 
من العناصر المتوفرة ولايمكنه الاختيار المتعدد. 


شريط في الصفحة عند الضغط عليه تسدل قائمة تحتوي على معلومات 
مختلفة عن تفاصيل الشريط وعند الضغط عليه مرة اخرى تختفي المعلومات 


التمرين الأول : 


الشكل العام التمرين 


-- Untitled Page - Windows Internet Explore! 
o 2ُ http: localhost: 153312 Default,a5px 


Taal: Help | % O snag اک ُه‎ 


Fila - Edit: Yiewm  Faworites 


Ti FaYorites 4 @ Arzcount Manager ا‎ Windows Liye Hotmail چ‎ aug geskted Sikes * 8ُ ۳ 


O O a O Td 


الشكل العام لبيئة العمل 


HAE ENO, 


salutian Solutionl' {1 project} 


n App_Data 
1. E Default, aspx 
1 ا ا‎ Cefalll,aspx,cs 


. Aj stylesheet ,css 
ا‎ 3 web.config 


الفناضر المستخدمة فى التبرين 


asp :ScriptManager 
asp : UpdatePanel 
asp : Label ت‎ 


asp: DropDownList 


Def aul i. كود صفحة ×0 5ج‎ 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" $< 


<1IDOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3. Oorg/TR/xhtml1/DTD/xhtml1-transitional. dtd'"> 


<html xmlns="http: //www.w3. org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
. stylel 
{ 
font-size: x-large; 
font-weight : bold; 
} 
</style> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<div style="text-align: left; background-color: #COCOC0; "> 


<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<span class="style1l ">AJAX</span><br /> 
<br /> 
<br /> 
<asp : UpdatePanel ID="UpdatePanell1l" runat="server"> 
<ContentTemplate> 
<asp:Label ID="Labell" runat="server" 
Width="201px'" CssClass="ClassWhite"></asp : Label> 
<br /> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControllID="DropDownList1" 
EventName="SelectedIndexChanged" /> 
</Triggers> 
</asp : UpdatePanel > 
<br /> 
<asp: DropDownList ID="DropDownListl" runat="server" 
AutoPostBack="True" 


OnSelectedIndexChanged="DropDownList1l SelectedIndexChanged" 
Height="22px" 
Width="218px'"" > 
<aspPp:List Item>White</asp : List Item> 
<asp:List Item>Red</asp: List Item> 
<aspPp:List Item>Green</asp: List Item> 
<asPp:List Item>Blue</asp:ListItem> 
<aspPp:List Item>Yellow</asp :ListItem> 
</asp : DropDownList> 
</div> 
</form> 
</body> 
</html> 


صفحة الكود الخلفي 5) .×50 .ا ألاة]De‏ 


using System. Configuration; 

using System. Data; 

using System. Lind; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. HtmlControls; 

using System. Web. UI.WebControls; 

using System. Web. UI.WebControls.WebParts; 
using System. Xml. Ling; 


public partial class _ Default : System. Web. UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 


Label1l. Text = DateTime. Now. ToString(); 


ey void DropDownLlist1 SelectedIndexChanged (object sender, 
EventArgs e) 

٤ if (DropDownList1l. SelectedValue == "Red"') 
Labell1l.CssClass = "ClassRed'"; 
n if (DropDownList1l. SelectedValue 
: Labell1l.CssClass = "ClassBlue"; 
if (DropDownList1l. SelectedValue == "Green" ) 
Labell1l.CssClass = "ClassGreen'"; 
if (DropDownList1l. SelectedValue == "Yellow" ) 
Label1l.CssClass = "ClassYellow"; 
j 


else 


{ 
Labell.CssClass = "ClassWhite'"', 
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. ClassRed 
{ 


background-color: Red; 


} 


.ClassBlue { 
background-color: Blue; 


} 


.ClassYellow { 
background-color: Yellow; 


} 


.ClassGreen { 


background-color: Green; 


} 


.ClassWhite { 
background-color: White; 


نهاية التمرين الاول 


التمرين الثاني : 


الشكل العام ية العمل : 


solution Solution1' F1 project}‏ ا 
Difajax project‏ ر a.‏ 
i App_Data‏ 

Bir 


. 


كود صفحة ×50 .) ألاة De‏ : 


@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits='"_ Default" 3< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix='"ccl1" 3< 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 


"http: //www.w3.org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<div> 
<table> 
<tr> 
<td>Name : </td> 
<td> 
<asp: Text BOx runat="server" ID="NameTextBOXx " 
BorderStyle="solid" BorderWidth=" 1px" BorderColor="#a9a9Ia9" /> 
</td> 
</tr> 
<tr> 
<td>Phone Number: </td> 
<td> 
<asp: Text BOx runat="server" 
ID="PhoneNumberTextBOx" BorderStyle="solid" BorderWidth=" 1px" 
BorderColor="#a9a9a9" /> 
</td> 
</tr> 
</table> 
<br /> 
<asp : RequiredFieldValidator runat="server" 1D="NReq'" 

ControlToValidate="NameText BOX" 

Display=" None" 

ErrorMessage="<b>Required Field Missing</b><br />A name 
is required." > 

</asp : RequiredFieldValidator> 

<cc1:ValidatorCalloutExtender ID="NReqE" runat="server" 

TargetControl ID=" NReq'"' 

HighlightCssClass="validatorCal loutHighlight "> 

</ccl1l :ValidatorCalloutExtender> 
<asp : RequiredFieldValidator ID="PNReq'" runat="server" 

ControlToValidate="PhoneNumberText BOX" 

Display=" None" 

ErrorMessage="<b>Required Field Missing</b><br />A phone 
number is required. <div style='margin-—top : 5px; padding : Spx; border: 1px 
solid #e9e9e9;background-color:white; '><b>Other Options:</b><br /><a 
href=' javascript :alert (&4quot; No phone number available in 
profile. &quot; ); '>Extract from Profile</a></div>"> 

</asp : RequiredFieldValidator> 
<ccl1:ValidatorCalloutExtender runat="Server" ID="PNReqE" 

TargetControl ID='" PNReq'" 

HighlightCssClass="validatorCal loutHighlight " 

Width=" 350px" > 

</ccl1l :ValidatorCalloutExtender> 
<asp : RegularExpressionValidator runat="server" 1ID=" PNRegEx'"' 

ControlToValidate="PhoneNumberText BOx" 

Display=" None" 

ValidationExpression=" ( (\ (\d{3]\) ?) | (\d{3)-))?\d{3]}- 
\d{4}" 

ErrorMessage="<b>Invalid Field</b><br />Please enter a 
phone number in the format:<br />(###) ###-####"> 


</asp : RegularExpressionValidator> 
<ccl1l:ValidatorCal loutExtender runat=" Server" 1D='" PNReqEx'" 
TargetControl ID='" PNRegEx'" 
HighlightCssClass="validatorCalloutHighlight "> 
</cc1l :ValidatorCalloutExtender> 
<asp : Button ID="Buttonl" runat="server" Text='" Submit " 
OnClick=" Button1 OnClick" /><br /><br /> 
<asp : UpdatePanel ID="UpdatePanell1" runat="server"> 
<ContentTemplate> 
<asp : Label id=" l1blMessage" runat="server" /> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger Control1D=" Buttonl" 
EventName="Click'" /> 
</Triggers> 
</asp : UpdatePanel > 
</div> 
</form> 
</body> 
</html> 


صفحة الكود الخلفي 5) .×50 .أ( ألاة]De‏ 


System; 
System. Configuration; 


using 
using 


Data; 
Ling; 
Web; 
Web. 
Web. 
Web. 
Web. 
Web. 
Xml 


Security; 

UI; 

UI. HtmlControls;, 

UI. WebControls; 

UI. WebControls. WebParts; 
. Lind; 


System. Web. UI. Page 


EventArgs e) 


EventArgs e) 


= String.Format ("Thanks {0}, we'll give you a 
NameText Box. Text, PhoneNumberTextBOx. Text); 
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h1, h2, h3, h4, ul, li, 


Pr, 


System. 
System. 
System. 
System. 
System. 
System. 
System. 
System. 
System. 


1lblMessage. Text 
call at {l1l]}.", 


div, 


using 
using 
using 
using 
using 
using 
using 
using 
using 


public partial class _Default 


{ 


protected void Page Load(ob ject sender, 


{ 
} 


protected void Button1 OnClick (object sender, 


{ 


j 
} 


body, 
{ 


margin :0; 


padding:0; 
border:none; 


top; 


body 


background: #B4B4B4 url (images/body_bg.gif) repeat left 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


} 


. validatorCal loutHighlight 
{ 


background-color: lemonchiffon; 


} 


نهاية التمرين الثاني 


التمرين الثالث : 


الصورة العامة للتمرين 


الشكل العام لبيئة العمل 


solution <alution1' (1 project} 
=5 Difajax projectS 


i App_Dpata الصورة‎ 


E 8 Bin اة‎ 


۰ اجاکںس أ » م 


war Raling 

HE ReorderList 

L2 ResizableContralExtendef 

ww: د‎ 
- SliderExtender 

: er ا‎ 


ay 


Def aul , 50۸» كود صفحة‎ 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl" g< 


<1DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3. Oorg/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 

<title>Untitled Page</title> 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<form id=" forml'" runat="server"> 

<asp :ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 

<strong>Resizable image with buttons for automatic 
resizing</strong> 

<br /><br /> 


<asp:Panel ID="PanelImage" runat="server" CssClass="frame Image" > 
<asp: Image ID=" Imagel" runat="server" 
ImageUrl="~/image/AJAX. gif" 
AlternateText=" ASP.NET AJAX" style="width: 100%; 


height:100%;" /> 
</asp:Panel> 


ASP.NET AJAX is a free framework for building a new generation 
of richer, more interactive, highly personalized cross-browser web 
applications. This new web development technology from Microsoft 
integrates cross-browser client script libraries with the ASP.NET 2.0 
server-based development framework. In addition, ASP.NET AJAX offers 
you the same type of development platform for client-based web pages 
that ASP.NET offers for server-based pages. And because ASP.NET AJAX 
1s an extension of ASP.NET, it is fully integrated with server-based 
services. ASP.NET AJAX makes it possible to easily take advantage of 
AJAX techniques on the web and enables you to create ASP.NET pages 
with a rich, responsive UI and server communication. However, AJAX 
isn't just for ASP.NET. You can take advantage of the rich client 
framework to easily build client-centric web applications that 
integrate with any backend data provider and run on most modern 
browsers. 

<br /><br /> 

<strong>Resizable text with "onresize" event handler</strong> 

<br /><br /> 

ASP.NET AJAX is a free framework for building a new generation of 
richer, more interactive, highly personalized cross-browser web 


applications. This new web development technology from Microsoft 
integrates cross-browser client script libraries with the ASP.NET 2.0 
server-based development framework. In addition, ASP.NET AJAX offers 
you the same type of development platform for client-based web pages 
that ASP.NET offers for server-based pages. And because ASP.NET AJAX 
1s an extension of ASP.NET, it is fully integrated with server-based 
services. ASP.NET AJAX makes it possible to easily take advantage of 
AJAX techniques on the web and enables you to create ASP.NET pages 
with a rich, responsive UI and server communication. However, AJAX 
isn't just for ASP.NET. You can take advantage of the rich client 
framework to easily build client-centric web applications that 
integrate with any backend data provider and run on most modern 
browsers. 

<br /><br /> 

<cc1 :ResizableControlExtender ID="ResizableControlExtender1l " 
runat="server" 
BehaviorID="ResizableControlBehavior1l " 
TargetControl ID='"Panel Image " 
ResizableCssClass="resizingImage" 
HandleCssClass="handleImage " 
MinimumWi dt h='" 50" 
MinimumHeight=" 2 6" 
MaximumWi dt h='"250" 
MaximumHeight='" 170" 
HandleOffsetX="' 3" 
HandleOffsetY¥=" 3"> 

</cc1l :ResizableControlExtender> 


</div> 
</form> 
</body> 
</html> 
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body, div, Pp, hl, h2, h3, h4, ul, li, 
{ 

margin :0; 

padding:0; 

border:none; 


background: #B4B4B4 url (images/body bg.gif) repeat left top; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


} 


.handleImage 
{ 


width:15px; 

height : 16px; 
background-image : url (images/HandleHand. png) ; 
overflow: hidden; 

cursor: se-—-resize; 


} 


. resizingImage 


4 


padding : O0px; 
border-style: solid; 
border-width: 3px; 
border-color: #B4D35D; 

j 

. frameImage 

{ 
width:130px; 
height : 65px; 
overflow: hidden; 
float : left; 
padding: 3px; 

j 

. frameText 

{ 
width: 100px; 
height : 100px; 
overflow: auto; 
float : left; 
background-color: #ffffff, 
border-style: solid; 
border-width: 2px; 
border-color: Gray; 
font-family : Helvetica; 
line-height :normal; 


نهاية التمرين الثالث 


التمرين الرابع : 


الصورة العامة للتمرين 


| 
2 LIntitled Page 


Tab One | wo || Tab Three 


PAGE ONE - Sample HTML Content for Tab 


الشكل العام لبيئة العمل 


ll Solution 'Solution1' (1 project} 
a1 Ê Diiajax projecté! 
ا‎ i ûpp_Data 

H* la Bin 
i EEE 


< i web.config 


عنصر اجاکس المستخدم 


- SliderExtender 8 
f SldeShomExtender 
EA TextBoxWatermarkExtender ل‎ 

dã ToggleButtonExtender ) 


ا ا ا 
3 2 ا : E"‏ 


Def aul i, 50» كود صفحة‎ 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" g< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit" TagPrefix="cc1" E 


<1IDOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id=" forml'" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<script type="text/ javascript "> 
function PanelClick (sender, e) 
{ 
j 
function ActiveTabChanged (sender, e) 
{ 
j 
</script> 
<div> 
<ccl1:TabContainer ID="TabContainerl'" runat='"server'"'> 
<ccl1:TabPanel runat="Server'" ID="Panel1" HeaderText='"Tab 


<ContentTemplate> 

<br />PAGE ONE - Sample HTML Content for Tab 
</ContentTemplate> 

</ccl1l :TabPanel> 


<ccl1 :TabPanel runat='" Server" ID="Panel2" HeaderText="Tab 


<ContentTemplate> 

PAGE TWO ¬- Sample HTML Content for Tab 
</ContentTemplate> 

</cc1l :TabPanel> 


<cc1 :TabPanel runat="Server" ID="Panel3'" 
OnClientClick='"PanelClick" HeaderText=" Tab Three"> 
<ContentTemplate> 
<br />PAGE THREE —- Sample HTML Content for Tab 
</ContentTemplate> 
</ccl1l :TabPanel> 


</ccl1l1:TabContainer> 
</div> 
</form> 
</body> 
</html> 


نهاية التمرين الرابع 


التمرين الخامس : 


الشكل العام للتمرين : 


الشكل العام لبيئة العمل 


2 . 
8 


salutian Solution1' F1 project} : 
ا‎ D:1ajax project ا‎ 
EH ھا‎ EEz Oala ۰ 


ایی ن 


عنصر اجاكس المستخدم 


E] FOTETTETUEFTETTETT 


MultiHandlesliderExtender‏ ل 


Def aul i. كود صفحة ×0 5ج‎ 


<%@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits='"_ Default" 3< 


@ Register Assembly="AjaxControlToolkit " 


Namespace="AjaxControlToolkit'" TagPrefix="ccl1" 


<1IDOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3. org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 

<title>Untitled Page</title> 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<form id="forml" runat="server"> 

<asp: ScriptManager ID="ScriptManagerl" runat="server"> 

</asp :ScriptManager> 

<div> 

<br /><br /> 

Enter a Date in the format 99/99/9999 (culture sensitive) <br 


<asp: TextBox ID="TextBoxl" runat="server'"></asp : TextBox> 
<cc1l :MaskedEditExtender ID="MaskedEditExtender1l " 
runat="server" 
TargetControlID='"Text Box1 " 
Mask=" 99/99/9999" 
MaskType="Date" 
MessageValidatorTip="true" 
OnFocusCssClass="MaskedEditFocus" 
OnlInvalidCssClass="MaskedEditError"> 
</cc1l :MaskedEditExtender> 
<cc1l :MaskedEditValidator ID='"MaskedEditValidator1l " 
runat="server" 
ControlToValidate=" Text Box] " 
ControlExtender='"MaskedEditExtender1l" 
Display="Dynami cc" 
TooltipMessage='"PLease enter a date" 
IsValidEmpty=" false" 
EmptyValueMessage="A Date is Required" 
InvalidValueMessage="Ths date is invalid"> 
</cc1l :MaskedEditValidator> 


<br /><br /> 
Enter a Number in the format $99, 999.00 <br /> 
<asp : TextBox ID="TextBOox2" runat="server'"></asp : TextBOx> 

<cc1l :MaskedEditExtender ID="MaskedEditExtender2 " 
runat="server" 
TargetControlID="Text BOx2 " 
Mask=" 99, 999. 99" 
MaskType='" Number" 
MessageValidatorTip="true" 
OnFocusCssClass="MaskedEditFocus'"" 
OnlInvalidCssClass="MaskedEdItError'" 
InputDirection="RightToLeft " 
DisplayMoney="Left " 
AcceptNegative="Left "> 

</cc1l :MaskedEditExtender> 

<ccl1l1 :MaskedEditValidator ID="MaskedEditValidator2 " 
runat="server" 
ControlToValidate='"Text BOXxX2 " 
ControlExtender="MaskedEditExtender2" 
Display="Dynami cc" 
Toolt ipMessage="Please enter a value between —-100 and 

12000" 


IsValidEmpty=" false" 
EmptyValueMessage='"A Number is Required" 
InvalidValueMessage="This Number is invalid" 
MinimumVa lue='"—-100" 
MinimumVa lueMessage="The value is too small. " 
MaximumVa lue='" 12000" 
MaximumVa lueMessage='"The number is too large"> 
</cc1l :MaskedEditValidator> 
<br /><br /> 
Enter a Time in the Format 99:99:99 (type A or P for AM and 
PM) <br /> 
<asp: TextBox ID="TextBox3" runat="server"></asp : TextBox> 
<cc1l :MaskedEditExtender ID="MaskedEditExtender3'" 
runat="server" 
TargetControlID="TextBOx3" 
Mask=" 99: 99: 99" 
MaskType='"Time" 
MessageValidatorTip="true" 
OnFocusCssClass="MaskedEditFocus" 
OnlInvalidCssClass="MaskedEQdI1tError" 
AcceptAMPM="true'"'> 
</cc1l :MaskedEditExtender> 
<cc1 :MaskedEditValidator ID='"MaskedEditValidator3'" 
runat="server" 
ControlToValidate='"Text BOx3" 
ControlExtender="MaskedEditExtender3'" 
Display="Dynamic " 
TooltipMessage="Please Enter a Time" 
IsValidEmpty=" false" 
EmptyValueMessage='"A Time is Required" 
InvalidValueMessage="This Time is invalid"> 
</cc1l :MaskedEditValidator> 
<br /><br /> 
</div> 
</form> 
</body> 
</html> 
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body, div, Pp, hl, h2, h3, h4, ul, li, table 
{ 

margin :0; 

padding:0; 

border:none; 


background: #B4B4B4 url (images/body bg.gif) repeat left top; 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


} 


. MaskedEditFocus 


{ 
background-color: #ffffcc; 


color: #000000; 


} 


. MaskedEditError 
{ 


background-color: #ffcccc; 


} 


نهاية التمرين الخامس 


التمرين السادس 


القكل العام ارين 


3 Uintiled Page - Microsoft Internet Explorer 


Fil Edit Yiey Favorites Tools: Help 


O sx : 3 BD 2 کر ا‎ Search <ê Favorites @ 2 - r ا‎ 
Address 2 http: fflocalhast: 1048/HOI-AZT-TextBoxWwatermark-YB/Gef ault, aspx 


mywepþsearch < i Search e ۳ myebFace f f sirlsense 


PIEa5ê eter a phone PUmDêr (699) 000-1111 | تکل سندوق انتم س‎ 


r 


۳ 
: O E کے ن ا“‎ E 


e» tBoxWatermarkExt ender‏ یستخدم عنصر اجاکس بشکل فردي مع کل صندوق نص یتم إضافتھ إلى 
الصفحة ويتم الربط عبر «11٥0إءغره٤٤ه٥موعج٣‏ الذي يعتبر مفتاح الربط بين العناصر الأساسية في ۸8۶۲ 
وعناصر الاجاكس حيث يتم الربط عبر المعرف الأساسي للعنصر . 


الشكل العام لبيئة العمل : 


a Bin 


از 
Default aspx 1‏ |2 


0 اھ‎ Stylesheet, css 


:3# web.config 


Sli deShaoNExtender‏ ' ا 


| Tabtontainer 


Eg Te»tBoxWwatermarkExtender 
| ل‎ ToggleButtonExtender 
E ToolkitScriptManager 


ج ہے کے یی 


& 


Def aul i, كود صفحة 50۸ج‎ 


@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" $< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl1l" <چ‎ 


<!1IDOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3. Oorg/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns=" http: //www.w3.org/1999/xhtml1l "> 


<head runat="server"> 

<title>6</tit1le> 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<form id="forml" runat="server"> 

<asp: ScriptManager ID="ScriptManagerl" runat="server"> 

</asp :ScriptManager> 

<div> 

<asp: TextBox ID='"TextBOxl1'" runat="server" 


Width="307px"></asp : TextBox><br /> 

<asp: TextBox ID="TextBOx2" runat="server" 
Width="307px"></asp : TextBox><br /> 

<asp : Button ID="Buttonl" runat="server" Text="Button" /><br 


/< 
<cCcl : Text BoxWatermarkExtender ID="TextBOxWatermarkExtender1l " 
runat="server" TargetControllID="TextBox1" 
WatermarkCssClass='"watermark" WatermarkText='" Please enter a phone 
number (963) 955-264766" > 
</ccl :TextBoxWatermarkExtender> 
<ccl : TextBoxWatermarkExtender ID="TextBOoxWatermarkExtender2 " 
runat="server" TargetControllD="TextBOx2" 
WatermarkCssClass="watermark'" WatermarkText="Enter anything'"> 
</ccl :TextBoxWatermarkExtender> 
</div> 
</form> 
</body> 
</html> 
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. watermark 


{ 


background: #FFAAFF; 


ذکر اسم الصف عن مناداته عبر الصفحة. 


نهاية التمرين السادس 


التمرين السابع 


الكل الع ارين : 


î Untitled Page - Microsoft Internet Explorer 


Fila Edit Yiew Fa¥oarites Tools Help 


CE @ DBD 2 f Search < Favorites f4 @- و‎ lw 2 ا‎ | 
Address 3 http: fflacalhast:1121HDI-AIAR-TE-Amination-YE Default, aspx 


mywebsearch - | j search ¥ F mywebFace ê irlSense O smiley _entral| f 


arirmıation's markup, youl wart to play a bit. All of 
٠ the arimations are created from simple, reusable 
` lirk Here bulding blocks that you can compose together. ۲ 
2 Before lng u'll be creatmg dazzlmg veuals. By 
س‎ erouping steps together ard specfymg therm to be 
۰ rr either in sequence or in paralel, you'll achieve 


almast anything you can tmagine, without wTHtinz û ډ‎ 
single lie of code! 


the ral idea of the ۹ i‏ 1 اا 
۹ ا 2 Any HITMAL. content that | E‏ 


كدو مسد خب E‏ 0 


الع اا ها ت و ری ا ار ا ا ی کل کر کن مات الوق 
الالكتروني فيكون لدينا حركة جميلة في الصفحة و من الممكن إن يحتوي الصندوق على اغلب عناصر اط 
يحتاج تركب الكود البرمجي في هذا التمرين إلى القليل من العمل وبعض المفاهيم في أمإء۷a5ه[‏ ويمكن 
التطوير عليه بسهولة . 


اكل الا دة المل.: 


٣ Solution Solution 1 1 EE 
3: ك‎ Cifajax projectisessionî! 
2 lJ App_Data 
E [ig Bin 
“= Aj Anim5heet.css 
: BEÎ Default .a5px 
i web.config 


E ArcordionPane 


E Arcordion ا‎ 
f 


El AlmaysyYisibleContralExtender 


:3* AninationExtender 


ا "A | Aut I‏ 
ارہ چ ls‏ ا ج ا ا ا ا 


Def aul i, كود صفحة »50۸ج‎ 


@ Page Language="C#" AutoEventWireup= '"t rue" 
CodeFile="Default.aspx.cs" Inherits="_ Default" 3< 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl1l" 3< 


<!1DOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3.org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l "> 


<head runat="server"> 
<title>7</tit1le> 
<link href="AnimSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id=" forml'" runat="server"> 
<asp: ScriptManager ID='"ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<div class="demoarea'"> 
Any HTML content that you want. 
<br /><br /> 
<!—-—- Button used to launch the animation —-—> 
<asp : Button ID="btnlnfo" OnClientClick="return false; " 
runat="server" Text="Click Here" /> 


<1—-—- "Wire frame" div used to transition from the button to 
the info panel —-—> 

<div id="flyout" class="wireFrame"></div> 

<!-—- Info panel to be displayed as a flyout when the button 
1s clicked ——> 


<div id="info" style="display: none; width: 250px; z-index: 
2; opacity: 0; filter: 
progid: DXImageTransform.Microsoft.Alpha (opacity=0); font-size: 12px; 
border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px; "> 
<div id="btnCloseParent" style="float: right; opacity: 100; 
filter: progid:DXImageTransform. Microsoft .Alpha (opacity=100) ; "> 
<asp:LinkButton I1D="btnClose" runat="server" 
OnClientClick="return false;" Text="X" ToolTip="Close" 
Style="background-color: #666666; color: #FFFFFF, text-align: center; 
font-weight: bold; text-decoration: none; border: outset thin 
#FFFFFF; padding: 5px;" /> 
</div> 
Once you get the general idea of the animation's markup, you'll 
want to play a bit. All of 
the animations are created from simple, reusable building 
blocks that you can compose together. 
Before long you'll be creating dazzling visuals. By grouping 
steps together and specifying 
them to be run either in sequence or in parallel, you'll 


achieve almost anything you can 
imagine, without writing a single line of code! 
</div> 
<script type="text/ javascript" language=" javascript "> 
// Move an element directly on top of another element (and 
optionally 
// make it the same size) 
function Cover (bottom, top, ignoreSize) { 
var location = Sys.UI. DomElement .getLocation (bottom) ; 
top.style.position = 'absolute'; 
top.style.top = location.y + 'px'"'; 
top. style. left = location.x + 'px'; 
1f (!ignoreSize) { 
top.style. height = bottom.offsetHeight + 'px'; 
top.style.width = bottom.offsetWidth + 'px'"; 


} 
} 


</script> 


<cc1 :AnimationExtender ID="OpenAnimat ion" runat="server" 
TargetControl1l1D="btnlInfo'"> 
<Animations> 
<OnClick> 
<Sequence> 
<$-- Disable the button so it can't be clicked again <چ--‎ 
<EnableAction Enabled=" false" /> 
<%-- Position the wire frame and show it $3 
<ScriptAction Script="Cover (Ş$get ('btnlInfo'), 
$get ('flyout'));" /> 
<StyleAction AnimationTarget=" flyout " 
Attribute="display" Value="block"/> 
<$-- Move the wire frame from the button's bounds to 
the info panel's bounds $> 
<Parallel AnimationTarget=" flyout" Duration=". 3" 
Fps=" 25"> 
<Move Horizontal="150" Vertical="—-50" /> 
<Resize Width="260" Height="280" /> 
<Color PropertyKey='"backgroundColor" 
Start Value='"#AAAAAA" EndValue="#FFFFFF'" /> 
</Paral1lel> 
<$-- Move the panel on top of the wire frame, fade it 
in, and hide the frame <چ--‎ 
<ScriptAction Script="Cover ($get ('flyout '), 
Ş$get ('info'), true);" /> 
<StyleAction AnimationTarget='" info" 
Attribute="display" Value="block" /> 
<FadeIn AnimationTarget="info" Duration=". 2"/> 
<StyleAction AnimationTarget=" flyout " 
Attribute="display" Value="none'"/> 
</ Sequence> 
</JOnClick> 
</JAnimations> 
</cc1l :AnimationExtender> 
<cc1 :AnimationExtender id="CloseAnimation" runat="server" 
TargetControllID="btnClose'"> 
<Animations> 
<OnClick> 
<Sequence AnimationTarget="info'""> 
<$-- Shrink the panel out of view <چ--‎ 
<StyleAction Attribute="overflow'" Value="hidden" /> 
<Parallel Duration=". 3" Fps=" 15"> 


<Scale ScaleFactor='"0.05" Center="true" 
ScaleFont="true" FontUnit="px" /> 

<FadeOut /> 
</Parallel> 
<%-—- Reset the target $> 
<StyleAction Attribute="display" Value="none'"/> 
<StyleAction Attribute="width" Value="250px'" /> 
<StyleAction Attribute="height" Value="" /> 
<StyleAction Attribute="fontSize" Value="12px'" /> 
<%-- Enable the button $> 
<EnableAction AnimationTarget="btnlIlnfo" Enabled="true" 


</Sequence> 
</JOnClick> 
</JAnimations> 
</ccl1l :AnimationExtender> 
</div> 
</form> 
</body> 
</html> 
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. demoarea { 

padding :20px; 

background: #FFF url (images/demotop.png) no-repeat left top; 
j 


. demoarea Pp 
{ 

padding : 5px; 
j 


. demoheading { 
padding-bottom: 20px; 
color:#5377A9, 
font-family :Arial, Sans-Serif; 
font-weight :bold; 
font—-size:l. 5em; 


} 


. demobottom { 

height : 8px; 

background: #FFF url (images/demobottom. png) no-repeat left 
bottom; 
} 


wirerFrame { 

display: none; 
overflow: hidden; 

z-index: 2; 
background-color: #FFFFFF; 
border: solid 1px #DODODO; 


} 


CloseButtonStyle { 
background-color: #666666; 


color: #FFFFFF; 
text-align: center; 
font-weight : bold; 
text-decoration: none; 
border: outset thin #FFFFFF; 
padding: Spx; 

j 


نهاية التمرين السابع 


التمرين الثامن : 


3 Untitled Page - Microsoft Internet Explorer 


Filz Edit Yim Favorites Tools Help 


O - © - BW BA OB) Osan gerane: 0 چ َء‎ @- 


e 8 http: fHlacalhast: 104 7HDI- AA TE- EEE E a5Px* 
mywebsearch + | PD searh ج‎ | mywebFace f airlsense Ome 


الفكل العام نة العمل : 


د Solution HDLAJAN-TK- UEUBIEXGUSE:‏ اا 
Di1..." HDI-AIAZX-TE-MutuallyExclusiyÉ‏ 8 = 
“Î App_Data‏ 


E. 4 Eiri 
H. 2| Default. aspx 


i readme , Ex 
ا‎ 8 Stylesheet, css 
e 3 web ,canfig 


عنصر اجاكس المستخدم في التمرين 


e ModalPopupExtender 
11 MukiHandlesiderExtender 


QF NoBot 


e 


Def aul i, كود صفحة »50۸ج‎ 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 


"http: //www.w3. org/IR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp : ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<br /> 
<table> 
<tr> 
<td style="width: 163px; height: 30px; "> 
IS over 25 Years of Age</td> 
<td style="width: 186px; height: 30px; "> 
IS over 35 Years of Age</td> 
<td style="width: 186px; height: 30px; "> 
IS over 45 Years of Age</td> 
</tr> 
<tr> 
<td style="width: 163px'"> 
<asp: CheckBox ID="IsOver25'" runat="server" 
Text="I am over 25 years old." /><br /> 


<ajaxToolkit :Mutual lyExclusiveCheckBoxExtender ID=" IsOver25Ex'"" 
runat="server" 
TargetControlID=" IsOver25" 
Key=" AgeChoice" /> 


</td> 
<td style="width: 186px'"'> 
<asp: CheckBox ID="IsOver35" runat="server" 
Text="I am Over 35 years old." /><br /> 


<ajaxToolkit :MutuallyExclusiveCheckBoxExtender ID="IsNotOver35Ex'"" 
runat="server" 
TargetControlID=" IsOver35" 
Key=" AgeChoice" /> 


</td> 
<td style="width: 186px'"'> 
<asp : CheckBox ID="IsOver45" runat="server" 
Text="I am Over 45 years old." /><br /> 


<ajaxToolkit :Mutual lyExclusiveCheckBoxExtender ID=" IsNotOverSEx" 
runat="server" 
TargetControlID=" IsOver45" 
Key=" AgeChoice" /> 


</td> 
</tr> 
</table> 


</div> 


</form> 
</body> 
</html> 
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div, Pp, h1, h2, h3, h4, ul, li, table 


margin :0; 
padding:0; 
border:none; 


background: #B4B4B4 url (images/body bg.gif) repeat left top; 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


نهاية التمرين الثامن 


body, 
{ 


الكل العام للمرين : 


- 
Address #8] http: {flocalhost:1075s10/Gefault aspx 


mywepbsearch > | j Search > 4 myebFace yj irlsense O Smiley Central MÊ Ê 


Just your average MS Joe ... ra 


IFyou would llke to contact me you cah send emaul for my blog at either of the folowing web sites. 


hte www.JoeUn.net 


http Hblogs.msdn. comiloeStagner 


Tm a Frogram Manager on the Microsoft Web Tools and Platform. 


While ty team 1s based mn Eedmond WA, 1 lye ım Mew England USA wth my beauthul we and children 
and work wherever the job takes re. 1 jomed Microsoft m 2Û0U1] after starting, bulding, and selihg 

a. Yl firm n Hew York ity. 1 began as a strategic adwisor to mdependent software venders (IDV), 
moved to a posion as a Developer Technology Expert ad Techical Evangelist, and after three years I 
moved to the Web Tools and Flatforrn Teatn. 


What do Î do at Microsoft ? 


Tou would thnk thus should be an easy question, but ıt's actually not. 


iy job has mafy¥ patts. 


To cormimumicate with icrosofl's Web Development Lustomers, to know as 2 
much as 1 can about all web development technologies, those made by Microsoft 


€ 
a those made ت‎ EY E else, ا‎ to اا ی‎ fron he world to the Web a ment product gp 


h1 “ak ro 


کل اا :۰ 


Solution TT - Solution Solution 1 pr... w HF 
a 
ا کک‎ '=alution1' i1 project; 
اګ‎ 0 Di ajax projectis10' 

aاةا_ pp‏ ر 
E‏ 
س I images‏ -- 


+ 

3 EE Default, aspx 

“< A stylesheet, iss 
i3 web.config 


۸ ۲ ا ا 


کا وا 


عنصر اجاكس المستخدم في التمرين : 


. rir 


م 


E) LalendarExtender 


m* CascadingDrapDown 


_ollapsiblePanelExtender‏ لتا 


olorPickerExtender س‎ 


| 1 orm boBox 


¬ LonfirmButtanExktender 


ک ا ا e‏ 


Def aul i, 50x» كود صفحة‎ 


@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $> 


<%@ Register Assembly="AjaxControlToolkit " 
Namespace="AjaxControlToolkit'" TagPrefix="ccl1l" g< 


<!1IDOCTYPE html PUBLIC "—-//W3C//DTD XHTML 1.0 Transitional //EN" 
"http: //www.w3.org/IR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns=" http: //www.w3.org/1999/xhtm1l "> 


<head runat="server''> 


<title>S9</title> 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 


<form id="forml1" runat="server"> 
<asp: ScriptManager ID="MasterScriptManager" 
EnableScriptGlobalization="false" runat="server"> 

</asp :ScriptManager> 

<cc1 :CollapsiblePanelExtender ID="cpe" runat="server" 
TargetControllID="ContentPanel " 
ExpandControlID="TitlePanel " 
CollapseControllID="TitlePanel" 
Collapsed="True" 
TextLabelID="Label1" 
ExpandedText='" (Hide Details...) " 
CollapsedText=" (Show Details...) " 
SuppressPostBack="true"> 

</cc1 :CollapsiblePanelExtender> 


<asp:Panel 1D="TitlePanel" runat="server" 
CssClass="collapsePanelHeader'"'> 
&nbsp; &nbsp; 
Who am I ?&nbsp; &nbsp; 
<asp :Label I1D="Labell" runat="server"> (Show 
Details...) </asp: Label> 
</asp :Panel> 
<asp :Panel I1D="ContentPanel" runat="server" 
CssClass="collapsePanel "> 
<h1> 
<br /> 
Just your average MS Joe ...</h1> 
&nbsp; If you would like to contact me you can send email from 
my blog at either 
of the following web sites. <p> 


<a 
href="http: //www.JoeOn.net">http: //www. JoeOn. net</a></p> 
<p> 
<a 
href="http://blogs.msdn.com/JoeStagner">http://blogs.msdn.com/JoeStag 
ner</a></p> 
<p> 


I'm a Program Manager on the Microsoft Web Tools and 
Platform. &nbsp; 
</p> 
<p> 
While my team is based in Redmond WA, I live in New 
England USA with my beautiful 
wife and children and work wherever the job takes me. I 
joined Microsoft in 2001 
after starting, building, and selling a .COM firm in New 
York City. I began as a 
strategic advisor to independent software venders (ISV), 
moved to a position as 
a Developer Technology Expert ad Technical Evangelist, 
and after three years I moved 
to the Web Tools and Platform Team. </p> 
<p> 
<img align="right" border="0" height="150" 
src=" images/JoeStagUK . bmp " 
width="150" alt='"" /></p> 
<h2> 
What do I do at Microsoft ?</h2> 
<p> 
You would think this should be an easy question, but it's 
actually not. 
</p> 
<p> 
My job has many parts. 
</p> 
<p> 
To communicate with Microsoft's Web Development 
Customers, to know as much as I 
can about all web development technologies, those made by 
Microsoft and those made 
by everyone else, and to communicate from the world to 
the Web development product 
teams and from the web development product teams to the 
development community . 
</p> 
</asp :Panel> 
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. collapsePanel 

{ 
width: 640px; 
height : Opx; 
background-color :white; 
overflow: hidden; 

j 

. collapsePanelHeader 

{ 
width: 640px; 
height : 20px; 
color: Yellow; 
background-color: Black, 
font—weight :bold; 
float : left; 
padding: 5px; 
cursor: pointer; 
vertical-align: middle; 


نهاية التمرين التاسع 


مع التمنيات بالتوفيق : آواز شيخي 


بسو الله الرحمن الرحي؛ 


AJAK e: 


Asynchronous JavaScript And XML =AJ AX 


بالتمارين 


Part 3 


ټالیوے و اعدا 


آواز شيخي 


smart WEB 


The Best Solution For YWleb 


AWAZ SHIKHI 


Web Developer 


Dmasclisêëê SyiIã 


| Moab ,: +963 955 26 47 66 
8 MSN . smarft-vision1@ hotmail .cûr 


أرحب بالعمل في دول الخليج العربي في مجال تصميم وبرمجة المواقع الالكترونية والتدريب له باستخدام بيئة ع 1. 
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تاریخ اجاکس: 


eS 
IT O NR NR 


مستقبل اجاکس: 


هناك الكثير يعتقدون أنه سيتحول عالم البرمجيات إلى الويب بمعني انه يمكنك استخدام البرامج المختلفة من خلال المتصفح 
وهناك مواقع كثيرة بدأت المشوار مثل تحويل ملفاتك إلى صيغ مختلفة من خلال المتصفح › > فبعضهم قال إن تطبيقات الويب لم 
تعد صفحات بعد الآن بل أصبحت تطبيقات سطح مكتب حقيقية. 


تنويه مهم قبل البدء : يجب تحميل الجزء الأول من الكتاب وتعلم كيفية ربط عناصر اجاكس ببيئة 2008 .N۴۲‏ من 
خلال الدرس الأول في الجزء الأول من الكتاب يمكن تحميله من الرابط التالي : 


AJAX PART 1 
http://wvw.4shared.com/file/110593220/71ee5Se0d/AJAXnet. html 


AJAX PARI 2 
http://www.4shared.com/file/133596333/b42db913/AJAX part 2.htm 


ف غير مجاني يرجى إرسال أي مبلغ إلى الحساب التالي : 


International Bank For Trade And Finance المصرف الدولي للتجارة والتمويل‎ 
Damascus — Syria دمشق - سوریا‎ 
Swift code : gbtfsyda gbtfsyda : الكرد‎ 


رقم الحساب : 613/751774 613/751774 AC/NO:‏ 
اسم صاحب الحساب : آواز شيخي Name: Awaz Shikhi‏ 
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عارض صور يعمل بشكل تلقائي عند الضغط على زر التشغيل ليقوم بتبديل عرض الصور 
الموحودة حسب رغبة المستخدم ويمكنه العارض من التقدم بالصور والرحوع للخلف 


يساعد هذا التمرين على معرفة مدى قوة كلمة المرور المكتوبة بداخل صندوق النص 
وذلك بثلاث إشكال مختلفة منها كتابة كلمة تعبر عن مدى القوة أو عن طريق تكبير 
اضهار اللون عند قوة الكلمة.. 


طرق مختلفة في تبئة البيانات الخاصة في صناديق النص ليتمكن المستخدم النهائي 
فن أغغار فا اة من صندوف النض دون الخاحة إلى اة 


ا۴ يملك ضل جمیل يمکن ان یحتوي اي عنصر نرید استخدامه 
تلاتة طرف مختلفة في إدراج التاريخ فقي صندوف النص ويتنسيق التاريخ المختلفة 


تحديث البيانات الموجودة في الشريط العلوي بحركة بطريقة بثلاتة طرق انيميشن يتم 
اختیارها عبر صناديق الاختيار 


أشرطة تمرير قيم رقمية يتم تحديث القيم بشكل مباشرة عند التمرير ويظهر توقيت 
أخر تحديث لتلك القيم 


اة من الروابط تط مر بالط على آلرانظ الأول 


صندوق نص عند الضغط عليه تظهر قائمة من الخيارات لنختار منها اختيار وأاحد ويتم 
وضع قيمته فقي صندوق النص بعد اختيار المناسب 
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التمرين الأول : 


Slide Show Extender (Control 


او وج یور و و ر 
_ = 
تد دوو جد دون چن ررر م رړړږړ 
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Solution Explorer - Solution '1' {1 project) «HF x 
ا‎ EE 8 2 3 ف‎ 


olution "1 1 projert)‏ ت 
TP Erisjax part 3 Ama2 î‏ 


pp a‏ و 

چ 

تحميل الصو المتاسبة کس سس ê‏ 7 
الرغبة Ê Blue Fills. ipg‏ 


۳ SuUnNsEel.1pg 

lêl YerticalPicturs jpg 
ا‎ ater lilies, jpq 
8 Ywinber , p3 


HMH: ÊZ] Default.aspx 
ıı Ê web .corfig N" 


: العناصر المستخدمة في التمرين‎ 
asp:lmage - 
asp:Label - 
asp: Button - 
cc1:SlideShowExtender - 


: عنصر اجاکس المس لمستخدم‎ 
ا‎ Rea=izabletontrolExztendEer 
[4F Rounded ornersEzxtender 
Te SlAErExtender 


alideShaowExtender‏ ا 


| Tabkantainer 

Tg TextBox atermarkExterıder 
ب‎ ToggleButtonExtender 

_& ToaltScriptManager 


2 LpdatePanslûanimationE të, ,. 
Default.aspX کڪیود صح‎ 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
IHhHEeEFILItES=" Default" 


<%@ Register Assembly="AjaxControlToolklt" Namespace="AjaxControlToolkit™ 
TagPEefix="cel™ 


TIDOCTYPE HEML PUBLIC =7 ROC BTS XATML L.0. TEansitioBa ly ZEN" 
FTES OMIT ODO TU EBTOLL DTD SBENL LITTRELL. OES 


<htEML XMLINS= "HELD 7 / WWW. WS -OEG/1999/ shtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
SEFOEM 10=FOML" FUNnGAT="SSTVETE> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp:ScriptManager> 
<h2 style="text-align:center">Slide Show Extender Control</h2> 
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OI 

<div style="text-align :center"> 

<Script runat="server" type="text/C#"> 
[System.Web.Services.WebMethod] 
[System.Web.Script.Services.ScCcriptMethod] 


public static AjaxControlToolkit.Slide[] getslides () 


AğjaxControlToolkit.Slide[]| slides = new 
AjaXCOoONnEEFOoOLToOLKITE.SLIQAdE [SI]; 


slides[0] = new AjğjaxControlToolkit.SLlide ("images/Blue 
BILLS DOT, AWS CDLKRIT, ANAS SOICRLY 

slides[1] = new AjaxControlToolkit.Slide ("images/Sunset. jP", 
"MunmMaûd FOoNaNY”"; "MunmMad: FOmMaRnY TY); 

slides[2] = new AjaxControlToolkit.Slide ("images/Winter. jp", 
"Zedan", "Zedan"); 

slides[3] = new AjaxControlToolkit.Slide ("images/Water 
LILLIES OO, OOM, OAM JY, 

Slides [4] = new 


AJ ARCONEEOLTOOLKIE,SLE1dE (Tima GES VEFEÎICALPICTUEE. po"; Roz", "Roz; 
return (slides); 
} 
CJ SSF 
ENDED; GNBSD;BE 7> 
BE 75 


<asSsp: Image ID="Imagel" runat="server" Height="250px" 
WIQChSTISOUODE" SbF 7 
BF 2 


<asp:Label ID="lblImageDescription" runat="server" /><br /> 
r 


<asp :Button ID="Btn_Previous" runat="server" Text="Previous" /> 
<asp:Button ID="Btn_Next" runat="server" Text="Next" 
WIdEN=SADK" 7D 7 
E 
<asp:Button ID="Btn_Play" runat="server" Text="Play" /><br /> 
<cc1 :SlideShowExtender ID="SlideShowExtender1" 
AutoPlay="true" ImageDescriptionLabelID="lblImageDescription" 
LOOp="trIuUe" NeRTBUtIEONID="Btn Next” PlaVBUttEoNID="Btn Play" 
PLaAYBULEORNTELT=TPlg4V" PEEVIOUSEUEEONID=TBtN FreEviouê" 
SlideShowServiceMethod="GetSllides" StopButtonText="Stop" 
TargetControlID="Imagel" runat="server"> 
</cc1:SlideShowExtender> 


a es 
TIALS 
%7 EOEMZ 


tbo 
ZREMLS 


تم تعرف ضمن كود الصفحة كود سي شارب ضمنياً وعرف بداخل الكود مصفوفة تضم عدد الصور المطلوب إظهارها 
في العارض ستلاحظ عند تعریف ع4|ا؟.†¡۸ t0۲ ٥1‏ »ز۸ ضمن کود السي شارب قبل تعریف عنصر اجاکس 
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Extender‏ ideShowاS:‏ 1ءء عدم التعرف على مكتبة الارتباط الحيوي لعناصر اجاکس لکن بعد تعریف عصر اجاكس 
سيتم تعريف المكتبة بشكل تلقائي من قبل بيئة العمل . 


و و 
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الكل ال ارين 


وک ر رو زین ږې 
em‏ * 


Text Tulicakors سے‎ | 
و‎ | | 
7 more characters 


a ga E 
TIE ۴ 


-. 


| Hep hdcaors ___— 
ا‎ 


الشكل العام لبيئة العمل : 


E 


3 3 
TE جوا‎ 1 


1 u 
د‎ 


ا 

“ أل‎ 
e O 

1 

2 


ELE 


ûpp_Data‏ ا ا 

E 

3E Default, aspx 
n ا ا ك‎ 


4 web, config 


asp: TextBOX - 
asp:Label - 
cc1:PasswordStrength - 
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عنصر اجاكس المستخدم : 


LÊ PutuallyExclusiyeCheckEox,. 


Ê NnBot 


[1 MumericlIpDomnExktender 


fl PopupkLontkrolExktender 
itr Raking 
FE ReorderList 


L4 ResizablecontrolExkender 


كود صفحة Default.aspx‏ : 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 


THHEEILITS=" Default" 


<%@ Register Assembly="AjaxControlToolklt" Namespace="AjaxControlToolkit™ 


TagPrefix="cc1™ 


GIDOCTYPE hENL PUBLIC "= IQOCIIBTD SETML 1.0 TEANRSIEIGHALZ EN" 
FINE TET 7 OL. NI GEO TRU SBT ILJ DTD SRENLL-=TLSNSITLIONAL. OE 


CBEML. RALNSSFRETBT NON. WILO IFO RRERNL 
<head id="Head1l" runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
CEFOEM LOST fOEML" FUNSAE= Server" 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</aS8B:SCrFIDtManager> 


TAI 
BE J> 

gEnNbep; Text ITnidicators<bE 7/2 

ENDS} 

<aSp:TextBox ID="TextBox1l" runat="server"></asp:TextBox>&nbsp; <br 
2 

éENnbSb} 

<aSp:Label ID="Label1" runat="server" Width="153px"></asp:Label><br 
ا‎ 

OE y> 

ENbêb;. Statüs Bar Indicators<brF 75 

ENnbsP;} 

<aSp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> 

ENb586} 

<aSp:Label ID="Label2" runat="server" Width="154px"></asp:Label><br 
3 

BE 7% 

éhbesp; Helë Indicators<bE 7% 

CABS; 

<aSp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br /> 

ENbBSD} 

<aSp:Label ID="Label3" runat="server" Width="154px"></asp:Label><br 
2 

BE J2 
BF J2 


<ccl :PasswordStrength ID="PasswordStrengthl" runat="server" 
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TargetControlID="TextBox1”" 
DLISbLaVPOSIELON="RIGHtESIQeE" 
StrengthIndicatorType="Text"™ 
PreferredPasswordLength="10"™ 
PrefixText="Strength:" 
TextStrengthDescriptions="Very 
Poor;Weak; Average; Strong; Excellent ™ 
MinimumNumericCharacters="0" 
MINIMUMS VMEOLCHATACTETS=TOT 
HelpStatusLabel1D="Label1" 
TextCssClass="TextIndicator_TextBox1™ 
RequiresUpperAndLlLowerCaseCharacters="false"> 
T/CC1 PSSSWOEQASETERGOEhHS 
<cc1 :PasswordStrength ID="PasswordStrength2Z" runat="server" 
TargetControll1D="TextBox2"™ 
DIsplavPos1ltlon="RightS1de" 
StrengthIndIiIcatOorTYype="BarIndicator™ 
BaFINdAICAtEOCCSSCLIaASS="BarIndicator TextBox 2" 
BarBorderCssClass="BarBorder_ TextBox2" 
PreferredPasswordLength="10"™ 
PrefixText="Strength:" 
TextStrengthDescriptions="Very 
Poor;Weak; Average; Strong; Excellent" 
MinimumNumericCharacters="1" 
MILRIMUMSVMEOLChEFaACTEeEES=™] ® 
HelpStatusLabell1D="Label2" 
RequiresUpperAndLowerCaseCharacters="true"> 
</cc1:PasswordStrength> 
<EoECl?PASSWOFOSEFENGES ID="PaSSWOLOSLTEeENGENS" Funat=" server" 
TargetControllD="TextBox3" 
TextCssClass="Text Indicator_TextBox3™ 
DISpLaAYVPOSILE1Ion="RigGhtS1de" 
StrengthIndlcatorType="Text" 
PreferredPasswordLength="20"™ 
PrefixText="Meets Polixy : " 
MinimumNumericCharacters="2"™ 
MILRTMUMSVYMEOLCHAEaACTLEE gS T 
HelpStatusLabelID="Label 3" 
HelpHandleCssClass="TextIndicator_TextBox3_Handle”™ 
HelpHandlePosition="BelowRight"™ 
TextStrengthDescriptions="Not at all; Very Low Compliance; 
Low Compliance; Average Compliance; Good Compliance; High Compliance; Yes" 
RequiresUpperAndLowerCaseCharacters="true"> 
T/CCEL:PASSWOFQASEEENGEhS 
SOL 
VITOR 
</body> 
CREM 


يمكن للمطور ان يقوم باختيار الكلمات المناسبة له للتعبير عن مدى قوة كلمة المرور وذلك بتعديل خصائص عنصر 
ا د ا ا د ا 


كود صأفخة StyleSheet.css‏ 
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.TEeXEINQAICAEOE TextBoOxXl { 
baCKOFOUNA=COLOE: GEA; 
color :White; 
CONE=TEMLLYFTATEISL; 

TONE =S126:K-SNALL: 
CONE =SEVLETITALIT, 
Oa: 2ES COS CUS OF 


.BarIndicator_TextBox2 { 
COLO TELES 
DaACKGEOUNA=COoOLoOETBLUE; 
Badd InRNgO=bBOoOETOM: LEK? 


.BarBorder_TextBox2 { 
DOFQdEF=STVLlE:SOLIGO; 
DOF EEVILOER:LBS? 
WIQERN: 2UUBE) 
VEFTICAL=S LION :MI1QALEe; 


} 


.TextlIndicator_TextBox3 { 

HaCKGEOUNO=COLOE: BLUE? 
Color: Yel Low; 
TONE =S13E SMALL; 
EONE=VEELANC: SMALL-CAP) 
DOINGS: EBE CDE LES BG, 

} 


.TextIndicator_TextBox3_Handle { 

WIGQEN: LEBER; 

height :14px; 
background-image :url (images/Question.png) ; 
overflow:hidden; 

CUEFSOE:NeLp; 


نهاية التمرين الثاني 
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التمرين الثالث ؛ 


الكل العام للتفرين : 


الشكل العام لبيئة العمل ٠‏ 
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Solution Explorer - Solution '5' {1 project) 


EEE, 
) aalution ‘5'1 project) 
l2 ف‎ Ei... 
J. l1 -| App_Code 
< TÎ MumericUpDomn.cs ET 
0 LF ûpp_pata 
I êg Bir 
al #) AjaxcontralToclkik dll 
. E AjaxcontrolTaalkit.pd 
-“ lî images 
= lal down. gif 
ا ا‎ up.diF 4 
2| DeFaulk.aspx 
E Default, aspx cs 
: #3 Mumaricl lpDamyr, a23 
0 ا‎ SEyleSheet c35 
٣ web.config 


Ald New liem = Klajax part 3 Awazbession 3161 


Templates; 


Yisual Studio installed templates 


2| eb Form CC IMasker Page A] Web User Control 
e وھ‎ lent Behavior 8 lent Control 8 tlient Library 
0 AJû* Master Page 2| AIA Web Form a AJAk-enabled WF Seryice 
j Brorıser File E Class گر‎ Class biaram 
#2 [crystal Report 4| Pataset #Î Generic Handler 
ا‎ lobal Application Class 5 HTML Page 18} 3rript File 
LING to SqL Classes | Report [| Report Wizard 
AReSource File | sike Map i skin File 
| Î SL Server Database A] Styla sheet | Text File 
TS WCF Service E3 eb configuration Filë a] Web Service 
[a XML File | XL sehera laj SLT File ا ا س‎ 


Py Templales ا‎ 
û visually designed class For creaking a Eb Serre 
Hare! MuUmericJpDown, gg نحتار الاسند المناسعي‎ 


Language: | l]Place cade in separate file 


Sel êz maslEer paqê 


اد ا 


NaN aA EER E 


asp:UpdatePanel - 
asp: TextBOXx - 


Page 13 of 37 


asp:l1mage - 

asp: Button - 

asp:Label - 
cc1:NumericUpDownExtender - 


عنصر اجاكس المستخدم : 


E1 ModalPopupExtender 
131 MuliHandleSliderExtender 
La MuLtualyExclusi¥eLheckBDx.,.. 


Ê MoBot 


PassmordStrength‏ ا 
a PopuptCantralExtardêr‏ 


كود صفح Default.aspx‏ : 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" 


<%@ Register Assembly="AjaxControlToolkilit" Namespace="AjaxControlToolkit™ 
TagPrefix="cc1™ 


4IDOCTYPE BEML PUBLIC T-VNSC7 DTD XATML LlL:0 TEaNSItCILoNaL/ 7ER" 
FHETBL E. OCU TEV SDENLLI DTD SOCOLIL=ETABSILEILORSL. ALET 


<BEML KMLINS=ThRETB T7 WUN. WS OF IS9 SETEM "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" 
</head> 
<DoOy> 
<FormM LA=TFOIMIL" FUnat="serTVerT™> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp:ScriptManager> 
<div style="text-align: center"> 
<asSsp :UpdatePanel I1ID="UpdatePanell" runat="server"> 
<Content Template> 
ABE JAB JS 
Enter a numeric value and use the up and down buttons to 
increment/decrement <br /><br /> 
<aASPD:TEXtBOX ID="TeXtBOXl" runat="server" Text="3" WIQth=" 120" 
style="text-align:center" /><br /><br /> 


Choose your favorite month<br /><br /> 
<asSp: TextBox ID="TextBox2" runat="server" Text="June" Width="120" 
style="text-align:center" /><br /><br /> 


Let the web service pick a random number between 0 and 1000 that is 
higher/lower than the displayed value<br /><br /> 

<aSp: TextBox ID="TextBox3" runat="server" Text="500" Width="120" 
style="text-align:center" /><br /><br /> 


Use the arrow images to increment/decrement the value<br /><br /> 
<aSp: TextBox ID="TextBox4" runat="server" Text="0" Width="70" 
style="text-align:center" /> 
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<aSsp: Image ID="img1l" runat="server" ImageUrl="~/images/down.dgif" 
AlternateText="Down" Width="20" Height="15"/> 

<asp:Image ID="img2" runat="server" ImageUrl="~/images/up.dgif" 
AlternateText="Up" Width="20" Height="15"/><br /><br /> 

DE J 


<asp:Button ID="Buttonl" runat="server" Text="SubMmMitE™ 
ORCLLECER= INET ONL CIILCET JST bE Js 


<aSsp:Label I1ID="Labell1l" runat="server" Text=" [No response provided 
a 
<CC1 :NumericUpDownExtender ID="NumericUpDownExtender1l™ 
runat="server" 
TargetControlID="Text Box1" 
WIQdtEh=" 120" 
RefValues="" 
ServiceDownMethod="" 
ServiceUpMethod="" 
TargetButtonDownl1D="™" 
TargetButtonUp1D=""> 
</cc1:NumericUpDownExtender> 
<CC1 :NumericUpDownExtender ID="NumericUpDownExtender2"™ 
runat="server" 
TargetControl1ID="Text BOx2" 
WIdtEh= I20" 


RefValues="January;February; March; April; May; June; July; August; September; Octo 
ber; November; December" 
ServiceDownMethod=""™ 
ServiceUpMethod=""™ 
TargetButtonDown I1D="" 
TarGetBUEEONUDIDsS TS 
</cc1:NumericUpDownExtender> 
<CC1 :NumericUpDownExtender ID="NumericUpDownExtender3"™ 
EUNaAt="serVEE™ 
TargetControlI1ID="Text BOox3" 
e ا‎ 
WIOEH=" J20" 
ServiceUpPath="NumericUpDown. asmx" 


ServiceDownPath="NumericUpDown.asmx™ 

ServiceUpMethod="NextValue"™ 
ServiceDownMethod="PrevValue™ 
RefValues="" 
TargetButtonDownl1D="™" 
TaIFGELEUETEONUpID= ® > 

</cc1:NumericUpDownExtender> 

<CC1 :NumericUpDownExtender ID="NumericUpDownExtender4"™ 

runat="server" 

TargetControlID="Text Box4" 
WIGOER=™ S0" 
TAEGELEBULCTEONDOWDID="IMGIL" 
TargetButtonUpID="img2" 
RefValues="" 
ServiceDownMethod="™" 
ServiceUpMethod=""> 

</cc1:NumericUpDownExtender> 

</ContentTemplate> 
</asp:UpdatePanel> 
< O1¥> 
<F FOES 
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كود صأفخة StyleSheet.css‏ 


DOCY;. OI, PB; Dl; BE, hO; DBA, UL; LL; DLS 
{ 


MAEOINY:; 
DUGIR, 
border :none; 


background: #B4B4B4 url (images/body_bg.gqif) repeat left top; 
FONE=FEMLLY: Tahoma, Arlaly SaN6-serTIir:; 
font =SsS127e: 758; 


كود صفخة NumericUpDo0W1.CS‏ 


using System; 

using System.Web; 

using System.Collections; 

using System.Web.Services; 

using System.Web.Services.Protocols; 


/// <summary> 

7/77 Summary dêseription. for NumericUpDown 

77 < SUMMmMaEY> 

[WebService (Namespace = "http://tempuri.org/™”) ] 
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfilel_1) |] 
[System.Web.Script.Services.ScriptService () ] 

public class NumericUpDown : System.Web.Services.WebService 


{ 


public NumericUpDown () 


{ 


//Uncomment the following line if using designed components 
//IRniElalizeComponentE.() ; 


[WebMethod ] 
public int NextValue (int current, string tag) 
{ 
Random rand = new Random () ; 
return rand.Next (Math.Min (1000, Math.Max (0, current) ), 1001); 


[WebMethod ] 
PUBLIC INE PréevValuéê(1nt current, SIFING Tag) 
{ 
Random rand = new Random () ; 
return rand.Next (0, Math.Min (1000, Math.Max(O0, current))); 


4 


Page 16 of 37 


ملاحظة : في صفحة ك. 7 N umerİcلp 00W‏ تم استخدام مل R2٣‏ لتوليد ارقام عشوائية بين 
رقمين 


NumericUp Dow .asmx کود صفجة‎ 


@ WebService Language="C#" CodeBehind="~/App_Code/NumericUpDown.cs"™ 


Class="NumericUpDown™ 


نهاية التمرين الثالث 


Page 17 of 37 


الشكل العام لبيئة العمل : 


21 êa LELE 
ات اادد ےا‎ ' (1 project) 
2 (j E: MSolution2) 

ٍ 2 i pp _Dsta 

El Ein 

Fl d2] Default, a3px 

e ا‎ web config 


asp:Panel - 


ccl1:DropShadowExtender - 
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عنصر اجاكس المستخدم : 


2 LollapsiblePanglExtender 


A, ConfirmBuktonExkender 
وو‎ DraqFanalExterıdêr 


Tz DropDomwnExkender 


LT DrapShadowExtendear wy 


2. | CYnamicPopulateExtender " 
ا‎ FiteredTextEoxExkender 


Default.asp< ةجفaڊص كود‎ 


@ Page Language="C#f" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_ Default" 


<%@ Register Assembly="AjaxControlToolklt" Namespace="AjaxControlToolkit™ 
TagPrefix="cc1™ 


GIDOCTYPE. hEML PUBLIC “=7 WIC DTD -KEATMD 1:0. TEANSIECIonaL/ EN" 
PHEW OLO TRU SDENLLF DTD SNELL EPORNIITIORAL. OE 


THEML KMLNS= INTE IWS OLO II SNELL"? 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
boy 
<FOEM 104="formMl" FUNatE="server"> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp:ScriptManager> 
BE 7> 
DFE 
SAIS 
<asp:Panel I1D="Panell" runat="server" BackColor="FfCOCOFF" Height="86px" 
WIQdEh= 1S BK "> 
This is my panel. 
</asp:Panel> 
<ccl1 :DropShadowExtender ID="DropShadowExtenderl" runat="server" 
TargetControlID="Panell" Opacity=". 75" Rounded="false" Radius="6"> 
</CC1 :DEOPShHadowExténder> 


ebe 

EON 
BOI 
CINEMILS 


نهاية التمرين الرابع 
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التمرين الخامس : 


الشكل العام لبيئة العمل : 
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1 


Salutianı Explarer - Solution Solutianl {1 pr... w HE #K 


splution Solution1' (1 project)‏ اچ ا 
E1, Solution z‏ ق = 
امعت و 
al" iy Bin‏ 
Ajax Control Toolkit, dll‏ 3 2 
Ajax kontrol Toolkit. pdb‏ [ کا enn.‏ 


و ا لقا >“ 


12| Default, aspx : صونة الزن‎ 
A: stylesheet ,css 


ê web.config 


asp: TextBox - 
cc1:CalendarExtender - 
asp:l1mage - 


عنصر اجاكس المستخدم : 


E, AccordionPanê 
E AlnaysYisibleContralExtender 


325 AnimationExktender 


= Auto conmpleteExkerder 


Cascading DropDoryr 
ت‎ —olapsiblsFPanslExternder 


r 
I FRE BiiFFARE FAR 


Default.aspX ةجفaڊص کود‎ 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_ Default" 


<%@ Register Assembly="AjaxControlToolkilit" Namespace="AjaxControlToolkit™ 
TAGFECTIR TCI > 


< IDOCTYPE BEL. PUBLIC. =7 IRICIIDBTD KEATML 1.0 TEABSIEIGONRSLJIEN" 
PHEW W I. OE TE SIOTMLLI OTD SNELL =CPANSLTIONAL OES 


ENE NE CON TIE E er CEE 


X*hNéad. FÛRHûAE= "servers 


<title>Untitled Page</title> 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<bDOoOyY> 

<FOEM 1A4="fOEML" FUNat="server"> 

<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 

X/aSD:SCEIPBEMaNnaGer> 

SAI» 

BE SBE J 

<b>Default Calendar:</b><br /> 
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<aSp:TextBox ID="Datel" runat="server"></asp:TextBox> 
<cc1 :CalendarExtender ID="CalendarExtenderl" runat="server" 
TargetControlID="Datel "> 
</cc1:CalendarExtender> 
bE EBE 75 
<b>Calendar with Custom Style and Date Format:</b><br /> 
<aSp:TextBox ID="Date2" runat="server"></asp:TextBox> 
<cc1:CalendarExtender I1ID="CalendarExtender2" runat="server" 
TargetControllID="Date2" CssClass="MyCalendar" Format="MMMM d, yyyy"> 
</cc1:CalendarExtender> 
ABE SBE 75 
<b>Calendar with associated button:</b><br /> 
<aSp:TextBox ID="Date3" runat="server"></asp:TextBox> 
<asp: Image [1D="lImagel" runat="server" 
ImageUrl="~/Calendar_scheduleHS.png" AlternateText="" /> 
<cc1:CalendarExtender I1ID="CalendarExtender3" runat="server" 
TargetCOntEEOLID="Date3" PoOopUpBUttoOnID="Tmagel "> 
</cc1:CalendarExtender> 
Ki 
CIGE 
<BOQG> 
TIREMLS 


StyleSheet.css ةخفêص كود‎ 


.MyCalendar .ajax_ _calendar_container 
ا‎ 

bDOFGEFEF:IDS BOLI F040; 

DaCKOEOUNO=COLGOT: -TEMONCERTETON] 

CGOLOE: Fo; 
ا‎ 
.MyCalendar .ajax__calendar_other .ajax_ calendar_day, 
.MyCalendar .ajax__calendar_other .ajax__calendar_year 
{ 

COLO. CLOCK 


.MyCalendar .ajax__calendar_hover .ajax_ calendar_day, 
.MyCalendar .ajax_ _calendar_hover .ajax__calendar_month, 
.MyCalendar .ajax_ _calendar_hover .ajax__calendar_year 


{ 


GoOLOF: BGlack; 
} 
.MyCalendar .ajax_ calendar_active .ajax__calendar_day, 
.MyCalendar .ajax__calendar_active .ajax_ _calendar_month, 
.MyCalendar .ajax__calendar_active .ajax_ calendar_year 
ا‎ 

COLOE: BLIACK; 

ORNL wWEIGHE BOLO; 


نهاية التمرين الخامس 
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التمرين السادس ٤‏ 


FFads 
Fi Colagse 
î Color Backg oun 


الشكل العام لبيئة العمل : 


HEE EF 
solution Solutian1' {1 project] 
ll ق‎ E1... oolutionz! 

- Î App_Data 


El 2 Ein 
gl. 3| Default, aspx 


ıı web, config 


Frm 
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asp: UpdatePanel 

asp:Label - 

input type="checkbox" - 

asp: Button - 
cc1:UpdatePanelAnimationExtender - 


: عنصر اجاكس المستخدم‎ 
J] TAU LUI LAN IETF 
‘Ty TExLEoxwatermarkExktender 


2 TogglsButtanExternder 
Ez TaclkitSerip Manager 


YalildaktarZaloutExtender‏ اا 


l= General 


Default.aspX ةجفaص کود‎ 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
InHerItEs=—" Default" > 


<%@ Register Assembly="AjaxControlToolklt" Namespace="AjaxControlToolkit™ 
TagPrefix="cc1™ 


tIDOCTYPE BEML PUBLIC = IRICIIDBTD KEATL 1.0 TrARSIEIOHEL EN" 
HEEB U. U LOLO TTR SDTEMLLJ DTD STEOLIL=EFRANSLETORSLL OLO 


<HIL KMING=FHEEBS 7 WRU. WI OF I FOS SHEN "> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="form1l" runat="server"> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</aSB:SCFIDEManager> 
<div SEV LE=<"mMaAFGOLIN=bBOETEOM:.,. LUBE; "> 
<div style="border: dashed 1px #f222222;"> 
<div 1d="up. container" Style="background=coloE: F40669A; "> 
<asp:UpdatePanel ID="update" runat="server"> 
<Content Template> 
<div 1id="background" style="text-allign: center; 
VEFtIcCaL=alilon: Middle; line-height: 44pxF Badding: l2Zp&K; heloht: 44K; 
Colo: FFEEFTEE; 
<asp:Label [1D="lblUpdate" runat="server" 
StEyle="baddinë: SPR; TONE=S126: lApK; font -vwelght: BOlQ; "ss 
4/28/1906 12:00:00 AM 
</asp:Label> 
Oi 
</ContentTemplate> 
STEIGGEES 
<ASD:ASVINCPOSEBaACKTEIGGEE CONEEFOLID="btnUpQate" 
EventName="Click" /> 
/TEIGGEES 
</asp:UpdatePanel> 
os 
CO 
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TOV 
Choose Lhe ETTEéEcTE;, then BOrésSsSs TUGOIEE OT 7 

<input type="checkbox" id="effect_fade" checked="checked" /><label 
Fo rafFeact Fade "sFadad/laBoalsebE 75 

<input type="checkbox" i1id="effect_collapse" checked="checked™ 
/><label for="effect_collapse">Collapse</label><br /> 

<input type="checkbox" id="effect_color" checked="checked" /><label 
for="effEGt_Color"s>Colort Backéground<7laãbel><br > 

<aSsp:Button I1ID="btnUpdate" runat="server" Text="Update" 
ORCI Ek="'ptnUpdate Click". ض7‎ 

<CCc1 :UpdatePanelAnimationExtender ID="upae" BehaviorlD="animation”™ 

runat="server" TargetControlID="update"> 


<Animations> 
TORUBOECINGS 
<SEOUENCEZ» 
<%-- Store the original height of the panel <چ--‎ 
ZSCEFCIDEACEION SCOLIbBLDE VET pb = STING SANRIMAtEILORT' TT; 


b._originalHeight = b._element.offsetHeight;" /> 


E Disable all the controls -- 
<PAFALLEL. QUEAEILONST OTS 
<EnableAction AnimationTarget="btnUpdate" 
Enabled="false" /> 
<EnableAction AnimationTarget="effect_color" 
EnabLléd=TTalsê" 7> 
<EnableAction AnimatlionTarget="effect_collapse"™ 
Enabled="false" /> 
<EnableAction AnimatlionTarget="effect_fade" 
Enabled="false" /> 
4 7PEEALLElLS 
<StyleAction Attribute="overflow" Value="hidden" /> 


<%-=- DO ACRE EDE SELECT CITES <چ--‎ 
<PAFALLEL OOFIAEION=N E5" FOSS 
SCONOLELON 
ConditionScript="Ş$get ('effect_fade') .checked"> 
<FadeOut AnimationTarget="up_container" 
MLHMLMOUMODACIEY= TA" J 
I CoORAITIORS 
SCORQALETOD 
ConditionScript="Ş$get ('effect_collapse') .checked"> 
<Resize Height="0" /> 
TICoRQAIELENS 
SCORNOLELON 
CoORNOIEIONSCEIDTE= "SEE 'EfTESCLE Colo’ Checked > 
<Color AnimationTarget="up_container" 
PEOCEETVYKEOV="BDACKOTOUDNQOCOLGOE™ 
EndValue="#FFO0000" StartValue="#40 669A" 
/> 
SI COBAITCIORS 
4ZJPaFALLELS 
</Sequence> 
</OnUpdating> 
<OnUpdated> 
TSEOUENCEZ 
<%-- DS EAC OT CRE. SEIECEET SITES < 
TPAPFELLEL OUEEEILON=T 20" FDS Os 
SConNQALEILoON 
ConditionScript="Ş$get ('effect_fade') .checked"> 
<Fadeln AnimationTarget="up_container"™ 
MILRNLmMUMODaCIE Y= 2F y> 
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CI CONIIELONS 
<CONOLELOoN 
ConditionScript="Ş$get ('effect_collapse') .checked"> 
<%-- Get the stored height --$§3 
<Resize 
HOLGNESCOEIBT= SFI ANIMATION" F<. OLCLGOIHELHeIGDE" J> 
COROT E LOTS 
CCONCOIEILON 
CONOIEIONSCEIptE="Sget ('Sffect_ color’ J .cChecked™> 
<Color AnimationTarget="up_container" 
PropertyKey="backgroundColor"™ 
SEAEtVALNS=TFPFTOOO0O™" EhdVallie=" F406 9A" 
/> 
C7 COT ETIoORS 
€IJPAFALLELS 


<%-=- Enable all the controls --_ 


<Parallel duration="0"> 
<EnableAction AnimationTarget="effect_fade" 
Enabled=rtTtue" /> 
<EnableAction AnimatlionTarget="effect_collapse"™ 
Enabled="true" /> 
<EnableAction AnimationTarget="effect_color" 
Enabled "Eruüê" /> 
<EnableAction AnimatlionTarget="btnUpdate" 
Erabled="true" /> 
<IPAFSLLESLS 
</Sequence> 
</OnUpdated> 
SIJANIMGTCIGRSS 
</cc1 :UpdatePanelAnimationExtender> 


EOFS‏ ك 
bodys‏ 
HEMIS‏ 


كود صڊفجة Default.aspX.cS‏ 


using System; 

using System.Configuration; 

using System.Data; 

using System.Linq; 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI. HtmlControls; 
using System.Web.Ul1l.WebControls; 
using System.Web.Ul1l.WebControls.WebParts; 
USING System. XML: LINO; 


public partial class _Default : System.Web.U1l.Page 
{ 


protected void Page_load(object sender, EventArgs e) 


1 


1 
protected void btnUpdate_Click (object sender, EventArgs e) 


{ 
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SYSTEM. TOES. TAFE. SLED (SOU) 
l1lblUpdate. Text = DateTime.Now. ToString () ; 


نهاية التمرين السادس 
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الشكل العام لبيئة العمل : 


HH‏ ب 


Solution Explorer - Solitian Solutianl' t1 ,,; 


8 Fr ûApp_Data 


a - 4 Ein 
= 3| Default, a5 px 


E) Default, aspx cs 


e E web.config 
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asp: TextBox - 
asp:Label - 

asp: UpdatePanel - 
cci1:SliderExtender - 


عنصر اجاکس المستخدم : 


fy PopupControlExtender 
sr Raling 
ا‎ ReorderLisk 


Lz ResizableControlExtender 


lf RFoundedCornEersE LENE 


1 SlAErExterder 


0 alideShawE xkender 
< Tabtantainer 


EA TerrRATMaFermMarEF TFERNPF 


Default.aspDX ةجفaڊص کود‎ 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inhéritê="_Defaunlt" 


<%@ Register Assembly="AjaxControlToolklit" Namespace="AjaxControlToolkit™ 
TagqPEefix="cel™ 5 


< IDOCTYPE BEML. PUBLIC. =7 /RICIIDBTD XATML LU TEANSIEIONESLJIEN" 
PDE I NIN 1 OE TEI RITMLLI OTD SINENLL =F TIONAL OE 


DEME AIRSET RL ORO LIT ENES 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
SEOEM LO=STfOEML™ FUNAE=SErTvVer "> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
<7aSBISECTIBEMaNSGeE> 
ك‎ 


<a :TexXtEBox ID="Sli1derl_BoundControl" fFunat="server" WIdth="30" /><Br 


<asp :TextBox ID="Sliderl" runat="server" /> 
CHT 7% 
COE 7% 
<aSp:TextBox ID="Slider2" runat="server" AutoPostBack="true" Text="0" 
< 
<asp:Label ID="Slider2_BoundControl" runat="server" /><br /> 
<asSsp:UpdatePanel I1D="UpdatePanell" runat="server" 
UpdateMode="conditional"> 
<Content Template> 
<aSp:Label 1D="lblUpdateDate" runat="server" style="font - 
size:80%;" Text="&nbsp;" /> 
</ContentTemplate> 
<Triggers> 
ESD TASVNCFOSTEEACKETELGTETE CONTTFOLIDSSIIderTa2" 
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EventName="TextChanged" /> 
</TEIiGGEES> 
</asp:UpdatePanel> 
SBE 75 
<CC1:SliderExtender ID="SliderExtenderl" runat="server" 
BehaviorlID="Slider1l" 
TaAFGEECONTTOLID= SILAL" 
BOUNOCONEFOLIDS"SIl1IerFI. BEoUNICONRTETEOL" 
Orientatlion="Vertical" 
EnableHandleAnimation="true"> 
ZICOCI:CLIOGTEEKEESNIETS 
<CC1:SliderExtender ID="SliderExtender2" runat="server" 
Behaviorl1lD="Sli1ider2" 
TAFEFOSECONTEOLIDSFSLLOET" 
MINIMUS — J OOF 
Maximum="1 00" 
BOUNGICONEEFOLID="Sli1dert2 BoundControl™ 
Steps=" 5"> 
CELTS LIAEEEKTENIEES 
TI EOEMS 
TBO 
t7 REML> 


كود صڊفجة Default.aspX.cS‏ 


using System; 

using System.Configuration; 

using System.Data; 

GOING SYSTEM bT, 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI. HtmlControls; 
using System.Web.Ul1l.WebControls; 
using System.Web.Ul1l.WebControls.WebParts; 
using System.Xml.Linq; 


public partial class _Default : System.Web.U1.Page 
{ 


protected void Page_lLload(object sender, EventArgs e) 


{ 


ScriptManagerl1l .RegisterAsyncPostBackControl (Slider2); 
1f (Page.IlIsPostBack) 
{ 


lblUpdateDate. Text = "Changed at 
DateTime.Now.ToLongTimeString () ; 
ا‎ 
} 


نهاية التمرين السابع 
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التمرين التامن : 


الشكل العام لبيئة العمل : 


™ = 
aT El 
n AE 
a Ee 
° TT a 

r me | 


mi 
!ا‎ I E a CBr 


Î Solution Solution1" {1 pr 
E FP E:1...1Solukionz' 
“" [FG App_Data 


ll: 2 Eiri 
ÛÎ company, aspx 
3 


1. Ê] Default. aspx 
2 3E hora, a5 

a A stylesheet, css 
8 Ê web.config 


wear hz 


oj 


العناصر المستخدمة في التمرين : 
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cc1:HoverMenuExtender - 
asp:Panel - 
asp:LinkButton - 


عنصر اجاكس المستخدم : 


re-| DropDownExkender 
LF GropShadomE xterıder 


| CYnamicPopulateExktender 
| FilteredTextBaxE ken dar 


^ Haver MeanuıExtanıder 
ê ListSearchExtender 
TT MaskadEdIEExter der 
TT MaskedEditYalidator 


Default.aspDX ةجفaص کود‎ 


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
InhHEFILtS=" Defall" $> 


<5@ Register Assembly="AjaxControlToolklit" Namespace="AjaxControlToolkit™ 
TagPEefix="ceG1™ 


<IDOCTYPE BEL. PUBLIC. =7 /RICIIDBTET XATML LU TFABSIEIGORESLJIEN" 
PDE I NIN 1 OE TEI SIOTMLLI DTD SNELL =LCTONSLT TIONAL OE 


CH EML MINS ELCEE I I NL TW OTO LTO OSM 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" 
</head> 
<body> 
X*FOEM 1Q4="fOEML" FUNaTE=Tserver"> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
</asp:ScriptManager> 
e 
<cc1 :HoverMenuExtender [1ID="HoverMenuExtenderl™ 
runat="server" 
TarGEeECONEEOLID=pENPIEOQUTSE" 
PODUBDCONTEEOLID="Pane LIPOBUbD™ 
POPUpDPOSLELON=TpOLEEOM” 
OffsetX=" 6" 
PopDelay="25" HoverCssClass="popupHover"> 
</cc1:HoverMenuExtender> 
<asp:Panel ID="PanelPopUp" runat="server" Heilght="50px" 
WIQEh=PI25DK" CSSC LSS ODUBDMENUT > 
<aSp:LinkButton ID="BtnUpDate" runat="server" 
CausesValidation="true™ 
CommandName="company" Text="company™ 
POStEBaACKUEFL="<»/company:a48PK"></aspTLinKBUttONn><bE 7> 
ASB: LIRKEBUttoRn ID=F"BENCancel" FUONnaT=Tserver" 
CausesValidation="false" CommandName="Cancel" Text="home”™ 
PostBackUrl="~/home.aspx"></asp:LinkButton> 
</asp:Panel> 


ASD SLLHKBUEEOD ID<FBENFIOQUCE" EUNATL=TSETVETSPRODUCT:? 
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Training VISOR aASDELINKEUEEOoN> 
<A> 
STON 


TBO 
tJ HEMIS 


كود صأفخة StyleSheet.css‏ 


ODODUCHOVEE 

| 
background-image:url (images/header-opened.png) ; 
background-repeat : repeat-=x; 
DACRGEOURNCO=DOSIEILOD? LETT TOD; 
bBacKGEOURI=GOoLloETFT STIFF, 

ا 

: OOBUGMENU 

{ 


poSltlion:absolute; 
visiblility:hidden; 
bacKGEoOURNI=COLGOE: FAAFFET, 
ORCI, 

filter: alpha (opacity=90); 


نهاية التمرين الثامن 
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التمرين التاسع : 


الشكل العام لبيئة العمل : 


5l 


aT 
ii 2r n1 TEIN ا‎ "٣ 


E‏ ت 
lH‏ چ li...‏ 
E BIR E 1‏ 1 


: 
tian ۲ Ez 1 


E 1 E] E 3 e 
ا‎ Dli Solution! 1 Drojert) 
E PEN. n 

` li App_Data 


ll ٠ Eirı 
2 FJ] Default, aspx 


: E 3 Default, aspx, cs 
i . تھ‎ Stylesheet ,css 


web.config‏ ا 


asp: TextBOX - 
asp:UpdatePanel - 
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asp:RadioButtonList - 
cc1:PopupControlExtender - 


عنصر اجاكس المستخدم : 


| MumericllpOownExtender 


PassmordStrength‏ اتا 


f PopupZontralExtender 


mu Rating 
E ReorderList 


| ResizableZontralExtender 


| F ReoundadZarnersExten der 


Default.aspX ةجفaڊص كود‎ 


@G Page Language="C#f" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
ITAHEEIES=" Default" 


<%@ Register Assembly="AjJaxControlToolklt" Namespace="AjaxControlToolkit™ 
TaqQPrEéeTIix= oc" 


4IDOCTYIPE NEML PUBLIC lI NSCIIDBTD KAT lL,U TEANSIEIORALFEN" 
OEE I O. WO LOO TBI ENCMILJDTDISOEMLI=#EFADESIEISORAL OES 


HEMI KMIRS=FIOELCDT VI WWW. WIL OFT LISS SOEML 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
DOQO YS 
<form id="forml" runat="server"> 
<aSp:ScriptManager ID="ScriptManagerl" runat="server"> 
*/aSpPiSCEIpEManager> 
OIT2 
E 
ToDo: 
<asp: TextBox I1D="MyTextBox" runat="server" 
WIQEH=FSIO GK ASD TEXTBOX 
bP 7S 
XASD;PANEL IDSTPaNELL" FONQATE="SEPvVEeY" COSCLG SSS" SODUDCONEEDL "> 
<asp :UpdatePanel 1D="UpdatePanell" runat="server"> 
<Content Template> 
ASD IRAUTOEULEEONLLSE IDET OTOBUTETCONLISEL" 
runat="server" AutoPostBack="true”" 
OnSelectedIndexChanged="RadioButtonList1l_SelectedIndexChanged"™ 
Width="146px"> 
<asp:ListItem Text="Awaz 


SHIRTS SSBC STTEENS 


<asp:ListItem Text="Simon 
Muazio"></a8B:ListItêm> 

<asp:ListItem Text="Brian 
Goldfarb"></asp:ListItem> 

<asp:ListItem Text="Joe 
Stagner"></aSp:ListItem> 


<asp:ListItem Text="Shawn 
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Nandi"></asp:Listltem> 


<aSDRAQAIOBUEEONLISES 
</ContentTemplate> 
</asp:UpdatePanel> 
</asp:Panel> 
DE 75 
<CcCc1 :PopupControlExtender 1D="PopupControlExtenderl" runat="server" 
CommitProperty="value"™ 
COMMLESCEIBTE=TEe VaA1ING #= 1 = SEND A MEETING REQUEST; 
POPUDCONTEEFOLID=" Pannell” 
POSLTLON=TBOTEOM" TALTEECONTEOLID=STMYTESTEOS "> 
TT ECLIFODBUGCONEEOLESEENGCEES 
<I> 
SJEGEMS 
€ BOO 
CHEMI 


كود صأفخة StyleSheet.css‏ 


+ WaAbÈErFMaFEK 


{ 
background: #FFAAFF; 


: HOBUPCONEEOL 

{ 
backgEFound=Co6lor: FAADATFF; 
positlion:absolute; 
VLSIBILIEYV:OILOIEN: 
border =stylersolid; 
HOEIUET=COGIOF: ELC: 
bBOEOGE=WIGQEB?: ABE; 


كود صفحة Default.aspX.cS‏ 


using System; 

using System.Configuration; 

using System.Data; 

using System.Linq; 

using System.Web; 

using System.Web.Security; 

using System.Web.UI; 

using System.Web.UI. HtmlControls; 
using System.Web.Ul1l.WebControls; 
using System.Web.UI1l.WebControls.WebParts; 
USING SVSLCEDADMLS LING, 

using AJaxControlToolkIE?; 


public partial class _Default : System.Web.U1l.Page 
{ 
protected void RadiloButtonLlList1_SelectedIndexChanged (object sender, 
EventArgs e) 
{ 
if ((String.IsNullOrEmpty (RadioButtonListl1.SelectedValue)) == 
false) 


// Popup result is the selected task 


PopupControlExtender.GetProxyForCurrentPopup (this.Page) .Commit (RadioButton L 
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1st1.SelectedValue) ; 


} 
// Rését thé séléctéd item 


RadioButtonlList1l.ClearSelection (); 


نهاية التمرين التاسع 


جميع التمارين تمت تجربتها وتم التأكد من عملها بشكل صحيح.. 


مع التمنیات بالتوفیق : آواز شيخي 


www.asp. net : المصدر‎ 
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